Correct way to port code to components?

help
1

Hello there community,

I am porting existing code from plain old Javascript to a Meteor project.

There is a component where I have a Facebook button and all the Javascript for that was originally in a separate file which was loaded by a plain old <script> tag in the main original HTML file.

I am making a component for such button and placing the <script> in the HTML file of the template works fine:

<template name="facebookPageIntegration">
  <!-- Facebook -->
  <script type="text/javascript" src="/assets/js/social/facebook/login/facebookRegistrationLib.js"></script>
  <div id="fb-root"></div>
[...]

However, I think it would be cleaner to place that code inside the .JS template file (template.html + template.js):

import { Template } from 'meteor/templating';

import './facebookPageIntegration.html';

[...]

Template.facebookPageIntegration.onRendered(function() {
	[...]
});

[...]

// Code from the embedded JS file.
function facebookRegistrationLib() {
	alert('Invoked from the template HTML file!');
}

export { facebookRegistrationLib }

:point_up: This last part does not seem to work. Tried just exporting the functions but resulted undefined when invoked.

My question is: what is the right way I should be porting this code to Meteor?

Thanks in advance for your time! :slight_smile:

2

Hey friend!

I had the same issue using a jquery lib for fluid scrolling. This is how I used inside the Template logic.

Template.landing.onRendered(function(){
    this.autorun(() => {
        (function($) {
            "use strict"; // Start of use strict

            // Smooth scrolling using jQuery easing
            $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html, body').animate({
                            scrollTop: (target.offset().top - 56)
                        }, 1000, "easeInOutExpo");
                        return false;
                    }
                }
            });
[...]
    })
}); // END of onRendered


// This code needed a small function to work 
var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!0,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){var e=document.documentElement,t=document.body;e.classList.add("sr"),t?t.style.height="100%":document.addEventListener("DOMContentLoaded",function(){t.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName} [....]

Obs.: As I am still learning some MeteorJs concepts, it seems that there is no need for autorun in this case.

But anyway, I hope it helps.

1 Like
3

Have you tried loading the script using something like scriptJS? I think managing the script loading using JS is cleaner than using the script tag.

1 Like
4

I will check that! Thanks

1 Like