Post Tools: How to Add a New Item

rod

How would I go about adding a new item to the Post Settings / Tools drop down list? Specifically I'd like to add it in the Share this Post section.

0_1476584251312_Screen Shot 2016-10-15 at 8.16.24 PM.png

I am using the Lavender theme.

Thank you.

pichalite

@rod modify the template and add it.

Lavender is a child theme for vanilla and only provides template files that it overrides. You will have to copy the file from vanilla and modify it.

Copy this file from vanilla and place it in the same location in lavender and modify it.
https://github.com/NodeBB/nodebb-theme-vanilla/blob/master/templates/partials/topic/post-menu-list.tpl

rod

@pichalite Where in NodeBB's path would I put my newly edited file?

Interestingly I already had this file public/templates/partials/topic/post-menu-list.tpl so after editing it and restarting NodeBB my edits were lost.

alff0x1f

@rod File public/templates/partials/topic/post-menu-list.tpl is cache (as I understand).

You need put your files in
node_modules/nodebb-theme-persona/templates/partials/topic/post-menu-list.tpl

rod

@alff0x1f Thanks! That did it. Well, at least I know where to edit the file. Now to get my new feature to work.

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:

  post-menu-list.tpl@48 
  <!-- 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>