Как я могу добавить границу, чтобы элемент выглядел как дерево и правильно удерживал его при изменении размера? - PullRequest
Новая
       12

Как я могу добавить границу, чтобы элемент выглядел как дерево и правильно удерживал его при изменении размера?

0 голосов
/ 03 мая 2019

Я пытаюсь отойти от jsTree , так как это не так настраиваемо, как наличие собственного кода. Я использую Bootstrap , чтобы иметь функциональность, аналогичную jsTree. Я также отказываюсь от jQuery (пока) из-за причин отладки. 

//Event delegation
function BindEvent(parent, eventType, ele, func) {
  var element = document.querySelector(parent);

  element.addEventListener(eventType, function(event) {
    var possibleTargets = element.querySelectorAll(ele);
    var target = event.target;

    for (var i = 0, l = possibleTargets.length; i < l; i++) {
      var el = target;
      var p = possibleTargets[i];

      while (el && el !== element) {
        if (el === p) {
          return func.call(p, event);
        }

        el = el.parentNode;
      }
    }
  });
}

//Add content after referenced element
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

//Custom function
function LoadSubOptions(ele) {
  ele = ele.parentElement.parentElement;
  let newEle = document.createElement("div");
  newEle.classList.add("row", "flex");
  //Generated HTML Content (currently hard coded):
  newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
  insertAfter(ele, newEle);
}

//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
  LoadSubOptions(this);
});
#tree-replacement button {
  margin-top: 5px;
}

.tree-border {
  border-left: 1px dashed #000;
  height: 100%;
  margin-left: 15px;
}

.flex {
  display: flex;
}


/*Probably not wise to use this method on Bootstrap's grid system: */

#tree-replacement .row.flex>[class*='col-'] {
  display: flex;
  flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div id="tree-replacement">
    <div class="row">
      <div class="col-xs-12">
        <button class="btn btn-default btn-block btn-lg">
          Option 1
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <button class="btn btn-default btn-block btn-lg">
          Option 2
        </button>
      </div>
    </div>

    <!--The generated html as example: -->
    <!--<div class="row">
      <div class="col-xs-1">
        <div class="tree-border">
        </div>
      </div>
      <div class="col-xs-11">
        <div class="row">
          <div class="col-xs-12">
            <button class="btn btn-default btn-block btn-lg">
              Option 2
            </button>
          </div>
        </div>
      </div>
    </div>-->
  </div>
</div>

JSFiddle

Я добавил границу в .column-*-1, чтобы учесть некоторый интервал для границы:

Border gap to button

Однако расстояние между ними я считаю слишком большим. Как я мог решить эту проблему? Я хотел бы воздержаться от стилизации системы сетки Bootstrap (имеется в виду, что я бы не хотел касаться какого-либо стиля за классами .col-* и .row и т. Д.), Поскольку это может нарушить отзывчивость или что-либо еще, связанное с Bootstrap.

Edit: Я также заметил, что при добавлении большого количества кнопок, просто щелкая их, компоновка дерева также начнет давать сбой. (Я знаю, что это другой вопрос, поэтому, если мне нужно опубликовать еще один вопрос, касающийся этой проблемы, пожалуйста, дайте мне знать) Есть ли способ, которым я мог бы решить эту проблему, чтобы элемент работал правильно?

Ответы [ 2 ]

1 голос
/ 03 мая 2019

Добавьте этот маленький CSS 

#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
    content: ' ';
    position: absolute;
    left: calc(-100% / 11 + 30px);
    top: 2em;
    border-top: 1px dashed #000000;
    width: calc(100% / 5 - 15px);
}


//Event delegation
function BindEvent(parent, eventType, ele, func) {
  var element = document.querySelector(parent);

  element.addEventListener(eventType, function(event) {
    var possibleTargets = element.querySelectorAll(ele);
    var target = event.target;

    for (var i = 0, l = possibleTargets.length; i < l; i++) {
      var el = target;
      var p = possibleTargets[i];

      while (el && el !== element) {
        if (el === p) {
          return func.call(p, event);
        }

        el = el.parentNode;
      }
    }
  });
}

//Add content after referenced element
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

//Custom function
function LoadSubOptions(ele) {
  ele = ele.parentElement.parentElement;
  let newEle = document.createElement("div");
  newEle.classList.add("row", "flex");
  //Generated HTML Content (currently hard coded):
  newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
  insertAfter(ele, newEle);
}

//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
  LoadSubOptions(this);
});
#tree-replacement button {
  margin-top: 5px;
}

.tree-border {
  border-left: 1px dashed #000;
  height: 100%;
  margin-left: 15px;
}

.flex {
  display: flex;
}


/*Probably not wise to use this method on Bootstrap's grid system: */

#tree-replacement .row.flex>[class*='col-'] {
  display: flex;
  flex-direction: column;
}

#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
    content: ' ';
    position: absolute;
    left: calc(-100% / 11 + 30px);
    top: 2em;
    border-top: 1px dashed #000000;
    width: calc(100% / 5 - 15px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div id="tree-replacement">
    <div class="row">
      <div class="col-xs-12">
        <button class="btn btn-default btn-block btn-lg">
          Option 1
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <button class="btn btn-default btn-block btn-lg">
          Option 2
        </button>
      </div>
    </div>

    <!--The generated html as example: -->
    <!--<div class="row">
      <div class="col-xs-1">
        <div class="tree-border">
        </div>
      </div>
      <div class="col-xs-11">
        <div class="row">
          <div class="col-xs-12">
            <button class="btn btn-default btn-block btn-lg">
              Option 2
            </button>
          </div>
        </div>
      </div>
    </div>-->
  </div>
</div>
0 голосов
/ 03 мая 2019

Здесь я использовал absolute позиционирование и увеличение высоты на 5px, что делает его касающимся следующего элемента div.

Вот ссылка Fiddle

и фрагмент кода: 

//Event delegation
function BindEvent(parent, eventType, ele, func) {
  var element = document.querySelector(parent);

  element.addEventListener(eventType, function(event) {
    var possibleTargets = element.querySelectorAll(ele);
    var target = event.target;

    for (var i = 0, l = possibleTargets.length; i < l; i++) {
      var el = target;
      var p = possibleTargets[i];

      while (el && el !== element) {
        if (el === p) {
          return func.call(p, event);
        }

        el = el.parentNode;
      }
    }
  });
}

//Add content after referenced element
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

//Custom function
function LoadSubOptions(ele) {
  ele = ele.parentElement.parentElement;
  let newEle = document.createElement("div");
  newEle.classList.add("row", "flex");
  //Generated HTML Content (currently hard coded):
  newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
  insertAfter(ele, newEle);
}

//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
  LoadSubOptions(this);
});
#tree-replacement button {
  margin-top: 5px;
}

.tree-border {
  border-left: 1px dashed #000;
  height: calc(100% + 5px);
  margin-left: 20px;
  position: absolute;
}

.flex {
  position: relative;
  display: flex;
}

.col-xs-11 .col-xs-12 {
    padding-left: 0;
}

/*Probably not wise to use this method on Bootstrap's grid system: */

#tree-replacement .row.flex>[class*='col-'] {
  display: flex;
  flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div id="tree-replacement">
    <div class="row">
      <div class="col-xs-12">
        <button class="btn btn-default btn-block btn-lg">
          Option 1
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <button class="btn btn-default btn-block btn-lg">
          Option 2
        </button>
      </div>
    </div>

    <!--<div class="row">
      <div class="col-xs-1">
        <div class="tree-border">
        </div>
      </div>
      <div class="col-xs-11">
        <div class="row">
          <div class="col-xs-12">
            <button class="btn btn-default btn-block btn-lg">
              Option 2
            </button>
          </div>
        </div>
      </div>
    </div>-->
  </div>
</div>
...