Post Tools: How to Add a New Item

[rod]

@PitaJ Sooo close.

In my browser console log I am getting ReferenceErrors For example:

ReferenceError: yourls is not defined
  <anonymous>
  w.event.dispatch()
  w.event.add/y.handle()

To me it seems like although I have the api js loaded that the $(document.body) section cannot reference it.

[PitaJ]

@rod are there no errors in the browser console? Can you access yourls from it? What is the API of yourls.js?

[rod]

@PitaJ At this point I am only referencing the yourls.VERSION which is part of the api (https://neocotic.com/yourls-api) via the console.log. Using Firefox's browser console

Specifically:

<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 () {
    console.log(yourls.VERSION);
  });
});
</script>

When I click the part of the post topic pull down that references the .post-share-yourlsNbb that is when the error gets displayed in the browser debug console.

N.B. I am not actually pointing to example.com, just using that as a place holder -- I could share the real URL if necessary and then redact later.

[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!