JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>mindmap plugin</title>
    <script type=”text/javascript” src="mindmap_script.js"></script>
    <link rel="stylesheet" media="screen" type="text/css" href="design_mindmap.css">
  </head>
  <body>
    <div id="main">
      <ul>
        <li id="main-point"><a href="#">Rohan</a>
          <ul id="branches">
            <li class="sub-point" hidden="hidden"><a href="#">Subpoint1</a></li>
            <li class="sub-point" hidden="hidden"><a href="#">Subpoint2</a></li>
            <li class="sub-point" hidden="hidden"><a href="#">Subpoint3</a></li>
            <li class="sub-point" hidden="hidden"><a href="#">Subpoint4</a></li>
            <li class="sub-point" hidden="hidden"><a href="#">Subpoint5</a></li>
            <li class="sub-point" hidden="hidden"><a href="#">Subpoint6</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

CSS

body {
  background-color:#999;
}

#main {
  border : 3px solid #fff;
  top: 0px;
  left: 0px;
}

ul {
  list-style-type: none;
}

a {
  color:#fff;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  background:#3399ff;
  border: 2px solid white;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  padding: 7px 7px 7px 7px;
  word-spacing:5px;
}

JavaScript

//global function
$(document).ready(function(){

  //get the main-point element
  var mainPoint = $('#main-point');

  //get a collection of sub-points
  var subPoints = $('.sub-point');

  //number of sub-points
  var nbrSubPoints = subPoints.length;

  //distance that the sub-points stray from the main-point
  var distance = 240;

  //angle between sub-points
  var angle = 360/nbrSubPoints

  //coordinates to be assigned to the main-point to center it inside .main div
  var main_top = $(".main").height()/2
  var main_left = $(".main").width()/2

  //sets the position of the main-point element
  //@check .offset(Object coordinates) in jQuery doc
  //TODO: need check what's wrong in here
  var test = mainPoint.offset({top : centeringPoint.XPos , left : - centeringPoint.YPos});
    
  console.log(test);

  //now we define its click handler
  mainPoint.on('click',function(){
     //show the different sub-points
    //TODO: we need to put formula for calculating the angles where each element starts
     subPoints.each(function(){
        var currentElement = $(this);
       //we actually musn't show the element right away, need change this using animations
       //currentElement.show();
     });
  });



});