Post Tools: How to Add a New Item

[alff0x1f]

@rod uh, you use lavender theme, right path is:
node_modules/nodebb-theme-vanilla/templates/partials/topic/post-menu-list.tpl

[rod]

Now for another fairly basic question. Now that I know how to create a new entry in the drop down list what would be an acceptable way to link a bit of javascript to my new item?

[rod]

Following up to my last post: Could I create a new CSS class in my Custom HTML & CSS area that I could reference?

For example the current Facebook, Twitter and Google sharing are referenced through the class {postSharing.class} and {postSharing.name}. If I were to create a custom class, let's say {myCustomSharing.class} and have the javascript there and then reference it in the post-menu-list.tpl file, would that work?

[PitaJ]

@rod You can just add the HTML directly into that file with the class attribute hard coded to whatever you want, and then listen to the click handler on the document level, like so:

HMTL in template file:

  [email protected] 
  <!-- END postSharing -->
+ <li role="presentation">
+   <a role="menuitem" component="share/whatever" class="post-share-whatever" tabindex="-1" href="#">
+     <span class="menu-icon"><i class="fa fa-whatever-site-icon"></i></span> Whatever
+   </a>
+ </li>
  <li role="presentation" class="divider"></li>

JS in custom header:

$(document.body).on('click', '[component="post/tools"] .post-share-whatever', function () {
  // do something when a "Whatever" share element is clicked
});

Of course, replace "whatever" with the site, and the fa-whatever-site-icon and be found here.

[rod]

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

$(document.body).on('click', '[component="post/tools"] .post-share-whatever', function () {
// do something when a "Whatever" share element is clicked
});

Do I need to wrap that in <script> </script> tags for the Custom Header section?

<script type="text/javascript">
    $(document.body).on('click', '[component="post/tools"] .post-share-whatever', function () {
      // do something when a "Whatever" share element is clicked
    });
</script>

[PitaJ]

@rod yes you would need to put it in a script tag, and probably a jQuery document.ready as well.

[rod]

@PitaJ The dense must be strong with me. I can't even get a simple console.log to work.

This is what I have in the post-menu-list.tpl file:
In the

        <li role="presentation">
                <a role="menuitem" component="share/yourlsNbb" class="post-share-yourlsNbb" tabindex="-1" href="#"><span class="menu-icon"><i class="fa {postSharing.class}"></i></span> Shortlink</a>
        </li>

And in my Custom Header I have:

<script type="text/javascript">
$(document.body).on('click', '[component="post/tools"] .post-share-yourlsNbb', function () {
    $( document ).ready(function() {
    console.log( "Shortlink clicked" );
    });
});
</script>

Would you be able to point to the error of my ways?

Thanks.

[PitaJ]

@rod you put the document.ready inside the event listener. You should have wrapped the event listener with it.

Also, you don't need the script type attribute anymore.

<script type="text/javascript">
$( document ).ready(function() {
  $(document.body).on('click', '[component="post/tools"] .post-share-yourlsNbb', function () {
    console.log( "Shortlink clicked" );
  });
});
</script>

[rod]

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

[rod]

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

[PitaJ]

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

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