Create bullet list in mindmap selection using js-mindmap

Question

I am using the js-mindmap library for a different kind of use, I need to allow a selection to link to extrenal/internal pages on some links but need others to bubble into a bullet list (preferably withing the same css shape as the rest of the mindmap.) I was initially looking at getting the content for the alert from the title or alt tags but not sure if they will retain the ul and li needed without defaulting to the mindmap format...

I'm searching for more of a more simplistic way to accomplish this. I'm sure css is most likely the best practice and I need to pull the content from the html for ease of creating different modles.

here is JSFiddle MindMp

html:

<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016 
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>

<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>

<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>

<style>
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
</style>



</head>
<body>
  <ul>
    <li><a href="http://jeffbarcay.com/">ALS</a>
      <ul>
        <li><a href="#" target="_blank" class="alert" style="background:green !important;">Chest Pain</a></li>
        <li><a href="#" target="_blank" class="icon linkedin" color="blue">Shortness of Breath</a></li>
        <li><a href="#" target="_blank" class="icon facebook">Allergic Reaction</a></li>
        <li><a href="http://www.google.com" target="_blank" class="icon twitter" title="goo">Diabetic</a></li>
        <li><a href="#">STEMI</a>
          <ul>
            <li><a href="#" target="_blank" class="icon twitter" title="9">ACS</a></li> 
            <li><a href="#" target="_blank" class="closebtn" title="13">STEMI</a>
              <ul>
                <li><a href="#" title="A">Treatment</a></li> 
                <li><a href="#" title="C">Protocol</a></li> 
              </ul>
            </li> 
          </ul>
        </li>


        </ul>
    </li>
  </ul>


  <div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
  </div>

</body>
</html>

score 1 · Answer 1 · answered Dec 31 '16 at 16:20

1

Here you go my friend, it's a bit hacky but it works. I made several modifications to the plugin itself as well as your styles and html.

The plugin was taking your anchor tags, stripping everything and creating them anew. I had to make sure my new attribute data-content was being preserved. Now the plugin checks if a link has this attribute and if it does, it doesn't fire the click event.

Then, I assigned my own click handler to replace content of the alert div and subsequently show it:

$('a').click(function(e){
    var tag = $(this).attr('data-content');
    if(tag)
    {
        $('.alert .content').html(content[tag]).parent().show();
    }
});

If you have any questions, let me know.

https://jsfiddle.net/x8826shn/7/

answered Dec 31 '16 at 16:20

Serg Chernata

12,280
6
32
50

this is a good start but I'm looking for the bullet list to branch off of the element selected as the other ul elements do. also the bullet list content needs to be in the html for ease of creating and updating, can't have the content stored in the javascript??? – BarclayVision Jan 01 '17 at 01:07
@BarclayVision I didn't think information about chest pain would need to be frequently updated. However, you absolutely could store that stuff in separate html files and use ajax to load content. – Serg Chernata Jan 01 '17 at 23:15
This is an example code - not actual use. There will be. Various branches, thus the need for lots of branches from existing topics – BarclayVision Jan 02 '17 at 10:46
@BarclayVision I see, well my suggestion still stands. Just keep everything in separate html files and use ajax to pull it in. – Serg Chernata Jan 02 '17 at 11:28
Not really what I was looking for in my original question but thanks for the effort. Was looking to use existing HTML tags and pull from that - I'm just not up on CSS enough to override existing behavior format as desired. – BarclayVision Jan 02 '17 at 11:48
@BarclayVision you could use existing html as well. I hope you fully understand my suggestion. Keeping markup for multiple pages in one file can get rather lengthy but I wasn't implying my suggestion was the only way to go. You could just as easily load content from the same html file. Just hide all of it and display what you need. – Serg Chernata Jan 02 '17 at 11:50

Create bullet list in mindmap selection using js-mindmap

1 Answers1