Code Editor

by sp_true

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<div class="api-doc">
  <div class="item">
    <div class="content">
      <div class="item-block">
        <div class="info">
          <div class="code-editor">
            <div class="code-editor__head">
              <div class="nav-window">
                <span class="close"></span>
                <span class="turn"></span>
                <span class="expande"></span>
              </div>
              <div class="nav-btn">
                <span class="copy">
                  Copy
                </span>
                <div class="state">
                  <span class="def active">Default</span>
                  <span class="exp">Expand</span>
                  <span class="collapse">Collapse</span>
                </div>
              </div>
            </div>
            <div class="code-editor__body">
              <div class="column">
                <span>1</span>
              </div>
              <code class="rainbow-show">

              </code>
              <div class="hide-text" style="display: none">
                <pre><span>"Recipients": [</span><br> <span>  {</span><br> <span>      "AccountHolder": {},</span><br> <span class="active">      "Amount": 1734.58,</span><br> <span>      "ClientPaymentAccountReferenceId": "string",</span><br> <span>      "PaymentAccountId": 0,</span><br> <span>      "SecurityQuestions": [],</span><br> <span>      "Token": {}</span><br> <span>  }</span><br> <span>],</span></pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="api-doc">
  <div class="item">
    <div class="content">
      <div class="item-block" style="margin-top: 1000px">
        <div class="info">
          <div class="code-editor">
            <div class="code-editor__head">
              <div class="nav-window">
                <span class="close"></span>
        ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
.opacity-50 {
  opacity: 0.5
}
#status {
  position: fixed;
  top: 0
}
.code-editor {
    background: #1F2937;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    margin-top: 30px;
}

.code-editor .code-editor__head {
    border-bottom: 1px solid #374151;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.code-editor .code-editor__head .nav-btn {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
pre {
  margin: 0
}
.code-editor .code-editor__head .nav-btn span {
    border-radius: 6px;
    padding: 4px 8px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    cursor: pointer;
}

.code-editor .code-editor__head .nav-btn .state {
    border-left: 1px solid #374151;
    margin-left: 16px;
    padding-left: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-editor .code-editor__head .nav-btn .state span {
    margin-right: 6px;
}

.code-editor .code-editor__head .nav-btn .state span:last-child {
    margin: 0;
}

.code-editor .code-editor__head .nav-btn .state span.active {
    background: #374151;
}

.code-editor .code-editor__head .nav-btn .copy {
    background: #374151;
}

.code-editor .code-editor__head .nav-window {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.code-editor .code-editor__head .nav-window span {
    width: 12px;
    height: 12px;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 6px;
    cursor: pointer;
}

.code-editor .code-editor__head .nav-window span:last-child {
    margin-right: 0;
}

.code-editor .code-editor__head .nav-window .close {
    border-color:...

JavaScript

// Code Edit
const lineItem = Array.from(document.querySelectorAll('.api-doc .item .content .info  .code-editor'))
lineItem.forEach((arrayElement, index) => {

  const codeLine = arrayElement.querySelector(".hide-text"),
    columnBlock = arrayElement.querySelector(".column"),
    code = codeLine.innerHTML,
    lengthContent = code.split('br').length

  let str = code,
    i = 0,
    isTag,
    text;
/*   for (let i = 2; i <= len + 1; i++) {
    let span = document.createElement('span');
    span.innerHTML += i + '<br>';
    column.appendChild(span);
  } */

  columnBlock.innerHTML = Array(lengthContent + 1).fill(0).map((_, i) => `<span>${i+1}</span>`).join('<br>');

  (function type() {
    text = str.slice(0, ++i);
    if (text === str) return;

    arrayElement.querySelector('code').innerHTML = text;

    let char = text.slice(-1);
    if (char === '<') isTag = true;
    if (char === '>') isTag = false;

    if (isTag) return type();
    setTimeout(type, 20);
  }());
  codeLine.parentNode.removeChild(codeLine);
});



$(window).on('load', function() {
  let block_show = false;

  function scrollTracking() {
    if (block_show) {
      return false;
    }

    let wt = $(window).scrollTop(),
      wh = $(window).height(),
      et = $('.api-doc .item .content').offset().top,
      eh = $('.api-doc .item .content').outerHeight(),
      dh = $(document).height()

    if (wt + wh >= et || wh + wt == dh || eh + et < wh) {
      block_show = true;
      // Тут код функции type()
    }
  }
  $(window).scroll(function() {
    scrollTracking();
  });

  $(document).ready(function() {
    scrollTracking();
  });
});