Best way to access navigation icons from plugin?


(Joe Seyfried) #1

I am currently thinking to add a button for a plugin in the button ul in the header like this:

…but I’m wondering how to access the DOM elements in a clean way - there is no ID anywhere in the

<div class="panel clearfix">
  <ul class="icons clearfix" role="navigation">
      <li class="notifications">

elements, so no $("#nav").append(mybutton); - do I really need to access it via the CSS class? Is this sufficiently safe or likely to change somewhere in the future? Or is there another (more elegant) way to accomplish this?


(eriko) #2

It is ugly but I did this.

function doLink(){
    var current_user = document.getElementsByClassName("current-user")[0];

    if(current_user==null){
        console.log("failed to find current_user");
        return;
    }
    
    var usermenu = current_user.parentNode;
    
     var button_site=document.createElement("li");
     button_site.class = "ember-view";
     var link = document.createElement("a");
     link.href = "http://HELP ME FOR LOVE OF ALL THAT IS WHOLIE";
	 link.title = "Help and Comments";
     link.className = "icon";
     var script_start = document.createElement("script");
     script_start.id = "metamorph-666-start";
     script_start.type = "text/x-placeholder";
     var icon = document.createElement("i");
     icon.className="fa fa-question"; 
     var script_end = document.createElement("script");
     script_end.id = "metamorph-666-end";
     script_start.type = "text/x-placeholder";
     link.appendChild(icon);
     button_site.appendChild(script_start);
	 button_site.appendChild(link);
     button_site.appendChild(script_end);
    usermenu.appendChild(button_site); }
window.onload = function() {
      doLink();
  }
  </script>

(Joe Seyfried) #3

Great, thx.

I was afraid that I had to use getElementsByClassName(…)[0] - it will work but just feels icky. :smile: But if someone else did that too, it makes me a bit less uncomfortable. :wink:

Maybe someone has something else…