Post Tools: How to Add a New Item


  • @PitaJ THANKS! That worked. I now have a console log output!


  • @PitaJ Is there a way that I can call another set of javascript that is outside of NodeBB?

    Specifically the YOURLS api code is on the shortlink server. My test html pages (outside of NodeBB) work by doing this:

    <script type="text/javascript" src="http://example.com/api/yourls.js"></script>
    <script>
        // More things here
    </script>
    

    Now when I try to embed the <script type="text/javascript" src="http://example.com/api/yourls.js"></script> line in the $(document.body) or $(document).ready sections it all breaks.

  • Global Moderator Plugin & Theme Dev

    @rod this should work

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

  • @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.

  • Global Moderator Plugin & Theme Dev

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


  • @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.

  • Global Moderator Plugin & Theme Dev

    @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>
    

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


  • @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);
          });
        });
      });
    });
    
  • Global Moderator Plugin & Theme Dev

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


  • @PitaJ PM'd

  • Global Moderator Plugin & Theme Dev

    @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);
          });
        });
      });
    });
    

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

    window.yourls = yourls;

    I WOULD never have figured that out. Thank you!


  • 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:
    0_1476825338968_Post_tools.png

    After clicking the shortlink option you get a pop-up with the shortlinked url:
    0_1476825386405_Post_tools_shortlink.png

    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.

  • Global Moderator Plugin & Theme Dev

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

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

  • @PitaJ FTW:

    0_1476826201479_Post_tools_shortlink.png

    Thanks for the tip about bootbox!


Suggested Topics

| | |

© 2014 – 2022 NodeBB, Inc. — Made in Canada.