Integrate an external script (rrssb) inside my Aurelia app

Tried to use the great rrssb (social sharing buttons) inside my Aurelia app. I got it working only by injecting the script inside my page the ugly way. So I’m here with this topic in the hope that someone could help me find a better way to use it.

Here is the way I got it working:

  • copy the rrssb.css inside my /src/css/ folder

  • copy the rrssb.min.js inside my /javascript/ folder

  • reference the css in my app.html page:

<template>
<require from="./css/rrssb.css"></require>

</template>

  • reference the js in my test.html page

<template>

<scriptinjector url=“javascript/rrssb.min.js”></scriptinjector>
</template>

Here I use the scriptinjector custom element well known.

It works, I can see social sharing buttons nicely displayed on my page.

2019-06-02_19h12_55

But this is not the ideal way of doing.

What I tried (but does not work):

  • added reference to rrssb in my package.json file

“dependencies”: {
“aurelia-bootstrapper”: “^2.3.0”,

“rrssb”: “^1.14.0”,

  • in my console executing npm install

  • added reference to rrssb in my aurelia.json file

“dependencies”: [

“rrssb”,

  • importing the package in one of my ts page import 'rrssb';

  • build (no errors) and start my app au run

Unfortunately the social sharing buttons displayed are misplaced. I can see them on my page (the css is ok) but there is a big blank space on the right because the js scripts are simply not read and thus not displayed as it should be.

(sorry I can only upload 1 photo at this moment)

So I wonder if I did something wrong or if the only way of doing is what I suggest at first.

Thanks for your help.

Note: skip directly to the last topic on this page to discover the solution. :grinning:

1 Like

Hi, I took a look and did these steps to get it working:

au new rrssb-aurelia --here
choose typescript - default app
choose yarn
yarn add rrssb

A console show error about jquery not present

yarn add jquery

more errors. had to include jquery in webpack.config as provider plugin:

     $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',

In app.ts, had to import rrssb and rrssb.css along with jquery:

import "rrssb";
import "../node_modules/rrssb/css/rrssb.css";
import $ from 'jquery';

export class App {
  public message: string = 'Hello World!';
  activate() {
    $('.rrssb-buttons').rrssb({
      // required:
      title: 'This is the email subject and/or tweet text',
      url: 'https://rrssb.netlify.com/',
  
      // optional:
      description: 'Longer description used with some providers',
      emailBody: 'Usually email body is just the description + url, but you can customize it if you want'
    });
  }
}

The markup is the suggested in the rrss site:

<template>
  <h1>${message}</h1>

  <!-- Buttons start here. Copy this ul to your document. -->
  <ul class="rrssb-buttons clearfix">
    <li class="rrssb-email">
      <!-- Replace subject with your message using URL Encoding: http://meyerweb.com/eric/tools/dencoder/ -->
      <a href="mailto:?Subject=your%20subject">
        <span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
            <path
              d="M20.11 26.147c-2.335 1.05-4.36 1.4-7.124 1.4C6.524 27.548.84 22.916.84 15.284.84 7.343 6.602.45 15.4.45c6.854 0 11.8 4.7 11.8 11.252 0 5.684-3.193 9.265-7.398 9.3-1.83 0-3.153-.934-3.347-2.997h-.077c-1.208 1.986-2.96 2.997-5.023 2.997-2.532 0-4.36-1.868-4.36-5.062 0-4.75 3.503-9.07 9.11-9.07 1.713 0 3.7.4 4.6.972l-1.17 7.203c-.387 2.298-.115 3.3 1 3.4 1.674 0 3.774-2.102 3.774-6.58 0-5.06-3.27-8.994-9.304-8.994C9.05 2.87 3.83 7.545 3.83 14.97c0 6.5 4.2 10.2 10 10.202 1.987 0 4.09-.43 5.647-1.245l.634 2.22zM16.647 10.1c-.31-.078-.7-.155-1.207-.155-2.572 0-4.596 2.53-4.596 5.53 0 1.5.7 2.4 1.9 2.4 1.44 0 2.96-1.83 3.31-4.088l.592-3.72z" />
            </svg></span>
        <span class="rrssb-text">email</span>
      </a>
    </li>
    <li class="rrssb-facebook">
      <!--  Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
      <a href="https://www.facebook.com/sharer/sharer.php?u=http://your-url-here" class="popup">
        <span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
            <path
              d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z" />
            </svg></span>
        <span class="rrssb-text">facebook</span>
      </a>
    </li>
    <li class="rrssb-twitter">
      <!-- Replace href with your Meta and URL information  -->
      <a href="https://twitter.com/intent/tweet?text=https://rrssb.netlify.com/" class="popup">
        <span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
            <path
              d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z" />
            </svg></span>
        <span class="rrssb-text">twitter</span>
      </a>
    </li>
  </ul>
  <!-- Buttons end here -->
</template>

And it works! Hope it is useful

2 Likes

Hello,

I should have been more clear when asking my question. My excuses. In fact, I suspect if you resize your browser (make it smaller) each rrssb buttons will simply be reduced by width, nothing more. This is not the normal behaviour. Let’s try it on the demo site: https://rrssb.netlify.com/ If you reduce the browser a little bit, you will notice some icons (on the right side) will only showing icons and associated text disappeared. This is a real responsive solution, optimized for mobiles.

I bet this is not the behaviour you have on your Aurelia website. The reason can be found when analysing the source code of rrssb.js. Let’s check the last 30 lines of code of this javascript file.

$(document).ready(function(){
   ...
   ...
   rrssbInit();
});

Normally, when document is ready, the function rrssbInit() should be executed. Unfortunately when integrating rrssb inside an Aurelia project (by doing import 'rrssb';) the integration is performed a bit too late because the document is already ready at this time and thus this code is never executed.

As a very bad workaround, for testing, I simply modified the source code of rrssb.js by adding rrssbInit(); and the line 79 of this file. And adding the code below in my typescript file:

attached() {
    (<any>$('.rrssb-buttons')).rrssb();
} 

Please be careful, here I used the attached event and not the activate.

In this way, it works but once again this is not okay to modify the external source code inside the node_modules folder.

Hope you or someone else could find a solution for this.

To sum up: that kind of problem can be encounter in many more situations where external code do things when document is ready $(document).ready(function() but unfortunately it will never be triggered because Aurelia has attached the external source a bit too late (the document is already ready).

Thanks.

1 Like

It is working fine for me.
aaa


1 Like

I uploaded the code to a github repo for you to test. https://github.com/ormasoftchile/aurelia-rrssb-demo

1 Like

You are right. Your project works fine.

Your Aurelia-CLI is based on Webpack. Mine is based on CLI’s built-in bundler.

I don’t know if this is the reason of my problem.

One thing for sure: in the rrssb.js at the very end of the file there is a call to rrssbInit(). It is used to initialize everything. This function call is inside of a $(document).ready(function(){ .....}. So we can assume that at this moment the DOM is loaded and every HTML element is loaded.

But when I debug this call for rrssbInit I can clearly see that DOM elements are not loaded.

var rrssbInit = function() {

	$('.rrssb-buttons').each(function(index) {
       debugger;
	   $(this).addClass('rrssb-'+(index + 1));
	});
 ...

I added a debugger statement inside of the code above. And on my side this line is NEVER reached ! So for me DOM elements are not loaded at this moment.

BUT if I modify the code for calling this function at the very end of the file by doing this:

setTimeout(rrssbInit, 5000);

in place of this:

rrssbInit();

So in that scenario the call is postposed of 5 seconds, then DOM is loaded (I see all html tags, and so on…) and everything is good: social sharing buttons are responsive: resizing browser window adjust buttons correctly.

So I would like to know why is it happening on my side and not yours ?

1 Like

Ok. I finally got it working. I created a custom element.

rrssb.ts

import 'rrssb';
export class Rrssb {
     attached() {
          (<any>window).rrssbInit();  <<<<<<<<<<<<<<<<<<
     }    
}

rrssb.html

<template>
   <require from="rrssb/css/rrssb.css"></require>
   <div id="eskimo-share-buttons" class="eskimo-share-buttons">
      <ul class="rrssb-buttons">
         ...
      </ul>
    </div>
</template>

The important part is rrssbInit() where the initialization is performed. I didn’t realize it at first but this function is global so it is available fos us to call it (take a look in rrssb.js at the end of the file).

Thanks to ormasoftchile for helping me on this.

2 Likes