Post Tools: How to Add a New Item

[PitaJ]

@rod I think this is what you need:

<script type="text/javascript" src="https://example.com/api/yourls.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  $(document.body).on('click', '[component="post/tools"] .post-share-yourlsNbb', function () {
    require(['yourls'], function(yourls) {
      console.log(yourls.VERSION);
    });
  });
});
</script>

[rod]

@PitaJ Thank you, again! That worked. Now to actually do something other than display the version number.

[rod]

@PitaJ I hope you can help me figure out this last problem. I am once again receiving a ReferenceError: yourls is not defined message in my browser debug console. (But the console.log(yourls.VERSION) statement does work fine -- it prints the version of the api as expected)

The URL is being entered into the YOURLS database but I get an error instead of seeing the shortlink that was created for the URL with console.log(data.shorturl) Do I need another " require(['yourls'], function(yourls) {" block some where nested in there?

This is what I have:

<script type="text/javascript" src="https://example.com/api/yourls.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  $(document.body).on('click', '[component="post/tools"] .post-share-yourlsNbb', function () {
    require(['yourls'], function(yourls) {
      console.log(yourls.VERSION);
      var yourlsNbb = yourls.connect('https://example.com/yourls-api.php');
      yourlsNbb.shorten(window.location.href, function(data) {
          console.log(data.shorturl);
      });
    });
  });
});

[PitaJ]

@rod can you message me the link to your site? It will be easier for me to debug directly.

[rod]

@PitaJ PM'd

[PitaJ]

@rod here you go, just need a reference on the window object for JSONp:

<script type="text/javascript" src="https://example.com/api/yourls.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  $(document.body).on('click', '[component="post/tools"] .post-share-yourlsNbb', function () {
    require(['yourls'], function(yourls) {
      window.yourls = yourls; // need this for JSONp
      console.log(yourls.VERSION);
      var yourlsNbb = yourls.connect('https://example.com/yourls-api.php');
      yourlsNbb.shorten(window.location.href, function(data) {
          console.log(data.shorturl);
      });
    });
  });
});

[rod]

@PitaJ said in Post Tools: How to Add a New Item:

window.yourls = yourls;

I WOULD never have figured that out. Thank you!

[rod]

And now the end result (for now -- I intend to change the pop-up box to some other method of displaying the shortlink):

New Shortlink post topic tool entry:

After clicking the shortlink option you get a pop-up with the shortlinked url:

Thank you @PitaJ @pichalite and @alff0x1f for your contributions.

N.B. Until now I have been using @rbeer 's great Smooth-shorts plugin but he doesn't seem to be supporting it anylonger. I have been stuck on NodeBB v1.0.2 because of that. It is bittersweet to disable his plugin but I am really happy with my new solution. As an aside I have Piwik tracking my YOURLS system also.

[PitaJ]

@rod I'd suggest using bootbox, since its bundled in NodeBB:

url = 'http://google.com';
bootbox.alert('<label>Short URL:</label> <input value="' + url + '">');

[rod]

@PitaJ FTW:

Thanks for the tip about bootbox!