Изменить порядок элементов из таблицы содержания, используя JS - PullRequest
Новая
       81

Изменить порядок элементов из таблицы содержания, используя JS

0 голосов
/ 10 июля 2020

Я создал таблицу содержания в JS из элементов H2 и H3.

Моя проблема связана с заголовками, содержащимися в панелях вкладок из основы фреймворка.

The HTML c структура проблематична, так как панели вкладок не находятся внутри соответствующих элементов вкладок.

Следствием этого является то, что список узлов из селектора запросов не соответствует тому порядку, который я хотел бы видеть. 

  let headings = document.querySelectorAll(
        ".article--full h2, .article--full h3"
      );

В этом примере я изо всех сил пытаюсь разместить h3 сразу после первого H2 в таблице содержания. H3s, включенные в

.tabs-panel из id = 'tab-96'

, должны быть помещены в TO C сразу после h2 из

.tabs a [aria-controls = "tab-96"]

https://codepen.io/matoeil/pen/OJMEbRx

JS: 

function createTocElementsArray(headings) {
  const tocElements = [];
  // eslint-disable-next-line no-restricted-syntax
  for (const item of headings) {
    // Ajout d'id à partir du titre
    if (item.id === "") {
      item.id = item.firstChild.data
        .split(" ")
        .slice(0, 2)
        .join("-");
    }
    // exclue les items vides
    if (escape(item.firstChild.data).startsWith("%0A") === false) {
      tocElements.push({
        id: item.id,
        headingType: item.nodeName,
        value: item.firstChild.data,
        previous: tocElements[tocElements.length - 1]
      });
    }
  }
  return tocElements;
}

function createElementFromHTML(htmlString) {
  const div = document.createElement("div");
  div.innerHTML = htmlString.trim();
  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild;
}

function RenderTocHtml(tocElements) {
  let toc =
    "<div data-sticky class='toc-desktop toc toc-tree sticky' data-top-anchor=\"main:top\" data-btm-anchor=\"footer:bottom\"><h2>table of content</h2><ol class='circle'>";
  tocElements.forEach(element => {
    if (element.headingType === "H2") {
      if (
        typeof element.previous !== "undefined" &&
        element.previous.headingType === "H3"
      ) {
        toc += "</ol>";
      }
      toc += `<li><a href='#${element.id}'>${element.value}</a></li>`;
    } else if (element.headingType === "H3") {
      if (element.previous.headingType === "H2") {
        toc += "<ol>";
      }
      toc += `<li><a href='#${element.id}'>${element.value}</a></li>`;
    }
  });
  if (tocElements[tocElements.length - 1].headingType === "H3") {
    toc += "</ol></ol></div>";
  }
  toc += "</ol></div>";

  return createElementFromHTML(toc);
}

const headings = document.querySelectorAll(
  ".article--full h2, .article--full h3"
);
const tocElements = createTocElementsArray(headings);
const tocHtml = RenderTocHtml(tocElements);
const container = document.getElementById("sidebar-first");
container.prepend(tocHtml);

HTML: 

<div class="content large-order-3 main-content">
              <div class="grid-container top-content">
          <div class="grid-y">            

<div data-drupal-messages-fallback="" class="hidden"></div>
          </div>
        </div>      
      <div class="grid-x">
                  <div id="sidebar-first" class="small-12 medium-4 large-2 sidebar sidebar-first data-sticky-container">            
          </div>
                <main id="main" class="small-12 medium-7 large-10 main-content" role="main">
          <a id="main-content"></a>
          <section>
<div id="block-amu-dosiweb-doc-content" class="block-amu-dosiweb-doc-content system_main_block block block-system-main-block">       
    <div class="block-amu-dosiweb-doc-content__content block__content block-system-main-block__content">
    <div class="article__submitted">
<article data-quickedit-entity-id="user/1" class="contextual-region" typeof="schema:Person" about="/user/1" data-quickedit-entity-instance-id="0">
  </article>
     <div>       
<span property="schema:dateCreated" content="2020-07-09T13:30:57+00:00" data-quickedit-field-id="node/49/created/fr/full">Jeudi 9 juillet 2020</span>
  <span property="schema:dateCreated" content="2020-07-09T13:30:57+00:00" class="hidden"></span>     </div>
   </div> 
<div class="article__wrapper">
  <article data-quickedit-entity-id="node/49" role="article" class="contextual-region article--full" about="/node/49" typeof="schema:Article" id="article" data-quickedit-entity-instance-id="0">
    <h1 class="heading">Les rôles sur les sites AMU</h1>
    <div>            <div data-quickedit-field-id="node/49/field_resume/fr/full" class="article__resume">abstract </div>
      <h2 data-quickedit-field-id="node/49/field_page_components/fr/full" class="article__page-components heading" id="
-">              <div>
        <div data-quickedit-entity-id="paragraph/90" class="paragraph paragraph-text cell content pararaph-90 large-12 medium-12 small-12  flex-child-auto" id="pararaph-90" data-quickedit-entity-instance-id="0">
            <div data-quickedit-field-id="paragraph/90/field_paragraph_content/fr/default" class="paragraph_text__paragraph-content"><p></p></div>
      </div>
</div>              <div>
  <div data-quickedit-entity-id="paragraph/97" class="paragraph paragraph-tabs paragraph-tabs-97 tabs-style-1" id="block-tabs-97" data-quickedit-entity-instance-id="0">
          <div class="grid-container">
        <div class="tabs-content--wrapper">
          
    <ul class="grid-x tabs" data-responsive-accordion-tabs="small-accordion medium-tabs large-tabs" id="tabs-97" role="tablist" data-tabs="wuvmhr-tabs">
          <li id="tab-title-96" class="tabs-title text-center large-auto medium-auto small-auto   is-active " role="presentation">
      <a href="#tab-96" class="tab-title--link" role="tab" aria-controls="tab-96" aria-selected="true" id="tab-96-label" tabindex="-1">
        <h2 class="section-title heading" id="-">  Catégories de rôles</h2></a>      
    </li>
          <li id="tab-title-99" class="tabs-title text-center large-auto medium-auto small-auto  " role="presentation">
      <a href="#tab-99" class="tab-title--link" role="tab" aria-controls="tab-99" aria-selected="false" id="tab-99-label" tabindex="-1">
        <h2 class="section-title heading" id="-">  Gestion des rôles</h2></a>      
    </li>
  </ul>
<div class="tabs-content tabs-content-" data-tabs-content="tabs-97">
          <div class="tabs-panel is-active" id="tab-96" role="tabpanel" aria-labelledby="tab-96-label">
        <div class="tabs-item--content-components">        
<div class="paragraph paragraph-accordion-95 cell large-12" id="paragraph-accordion-95">
                      <ul class="accordion" data-accordion="dtpmis-accordion" data-allow-all-closed="true" role="tablist">
  <li data-accordion-item="" class="accordion-item" role="presentation">
      <a href="#section-92" class="accordion-title " aria-controls="5oon37-accordion" role="tab" id="5oon37-accordion-label" aria-expanded="false" aria-selected="false" tabindex="-1"><h3 class="section-title heading" id="section-92">Les rôles Drupal</h3></a>
    <div data-tab-content="" class="accordion-content " role="tabpanel" aria-labelledby="5oon37-accordion-label" aria-hidden="true" id="5oon37-accordion">
      <div class="grid-x grid-margin-x align-center accordion-content--components">        <div data-quickedit-entity-id="paragraph/91" class="paragraph paragraph-text cell content pararaph-91 large-12 medium-12 small-12  flex-child-auto" id="pararaph-91" data-quickedit-entity-instance-id="0">            <div data-quickedit-field-id="paragraph/91/field_paragraph_content/fr/default" class="paragraph_text__paragraph-content"><p>content.</p>
    </li>
</ul></div>      </div>      </div>
    </div>
  </li>
  <li data-accordion-item="" class="accordion-item" role="presentation">
      <a href="#section-94" class="accordion-title " aria-controls="dyjck2-accordion" role="tab" id="dyjck2-accordion-label" aria-expanded="false" aria-selected="false" tabindex="-1"><h3 class="section-title heading" id="section-94">Les rôles AMU</h3></a>
    <div data-tab-content="" class="accordion-content " role="tabpanel" aria-labelledby="dyjck2-accordion-label" aria-hidden="true" id="dyjck2-accordion">
      <div class="grid-x grid-margin-x align-center accordion-content--components">
        <div data-quickedit-entity-id="paragraph/93" class="paragraph paragraph-text cell content pararaph-93 large-12 medium-12 small-12  flex-child-auto" id="pararaph-93" data-quickedit-entity-instance-id="0">
            <div data-quickedit-field-id="paragraph/93/field_paragraph_content/fr/default" class="paragraph_text__paragraph-content"><p><text</div>
      </div>
      </div>
    </div>  
  </li>
    </ul>
  </div>
      </div>
    </div>
          <div class="tabs-panel " id="tab-99" role="tabpanel" aria-labelledby="tab-99-label" aria-hidden="true">        <div class="tabs-item--content-components">
        <div data-quickedit-entity-id="paragraph/98" class="paragraph paragraph-text cell content pararaph-98 large-12 medium-12 small-12  flex-child-auto" id="pararaph-98" data-quickedit-entity-instance-id="0">
            <div data-quickedit-field-id="paragraph/98/field_paragraph_content/fr/default" class="paragraph_text__paragraph-content"><p>text</p></div>      </div>      </div>
    </div>
  </div>        </div>
      </div>
      </div>
</div>
          </h2>
      <h2 data-quickedit-field-id="node/49/field_categorie_article/fr/full" class="article__categorie-article heading" id="
-">
              <div><a href="/taxonomy/term/27" hreflang="fr" tabindex="-1">Utilisation de Drupal</a></div>
          </h2>
    </div>
  </article>
</div>
      </div>
</div>          </section>
        </main>
              </div>
    </div>
...