// Zendesk Guide category pages with expandable listings
// author: Ashleigh Rentz, koresoftware.com
// license: https://mit-license.org/

window.onload = function() {
  expandCategoryPage();
};

function expandCategoryPage() {
  // Only execute this if we're on a category page.
  if (document.getElementsByClassName("category-content")[0] == null) return;

  const max_size_to_expand = 12;  // Fall back to normal behaviour if larger.
  const default_quantity = 6;  // Zendesk default, unsure if it can be changed.

  // Find the "See all N articles" links to (potentially) expand.
  const see_all_array = document.getElementsByClassName("see-all-articles");
  for (let i = 0; i < see_all_array.length; i++) {
    var number_articles = see_all_array[i].innerText;
    number_articles = parseInt(number_articles.match(/[0-9]+/));
    if (number_articles <= max_size_to_expand) {
      // Change text ASAP (\u25BC is unicode down-pointing triangle).
      if ((number_articles - default_quantity) > 1) {
        see_all_array[i].innerText = '\u25BC Show ' +
          (number_articles - default_quantity) + ' more articles';
      } else see_all_array[i].innerText = '';
      expandThisSection(see_all_array[i]);
    }
  };
  return;

  async function expandThisSection(section_link_element) {
    // Fetch the section page and create a list of <li>'s to add.
    var section_page_response = await
        fetch(section_link_element.getAttribute('href'));
    var section_page_contents = new DOMParser().parseFromString(
          await section_page_response.text(), 'text/html');
    var article_list = section_page_contents.body.getElementsByClassName(
          'article-list-item');
    var articles_to_add = [];
    for (let i = default_quantity; i < article_list.length; i++)
        articles_to_add.push(article_list[i]);

    // Get the <ul> for this section on the category page.
    var list_element = section_link_element.previousElementSibling;
    // Make sure it's the right thing, bail out if not.
    if ((list_element.tagName !== 'UL') ||
        (!(list_element.classList.contains('article-list')))) return;

    // Insert the article(s).
    if (articles_to_add.length == 1) {
      // Insert the final article into the list, no expandable needed
      list_element.append(articles_to_add[0]);
      // Remove the 'see all' link.
      section_link_element.remove();
    } else {
      // Insert more articles into the list as a hidden element in the DOM.
      for (let i = 0; i < articles_to_add.length; i++) {
        list_element.append(articles_to_add[i]);
        list_element.lastElementChild.classList.add(
            'collapsible-article-list-item');
        list_element.lastElementChild.setAttribute('hidden', true);
      };
      // Change link action and assign a class for optional CSS styling.
      section_link_element.classList.add('collapsible-article-list-control');
      section_link_element.addEventListener('click',
          function(){showMoreArticles(list_element, section_link_element)});
      section_link_element.removeAttribute('href');
    };
  };  // end expandThisSection()

  function showMoreArticles(list_element, section_link_element) {
    for (let i = 0; i < list_element.children.length; i++) {
      list_element.children[i].removeAttribute('hidden');
    };
    section_link_element.remove();
  };

};  // end expandCategoryPage()

• Dave Dyson

  • 2021년 09월 16일 01:25

  Thanks for posting this, Ashleigh!

• Ifra Saqlain

  • 2021년 09월 16일 06:33

  Community Moderator

  

  

  

  Hi @Ashleigh Rentz, did you update something into your category_page.hbs file for this nice functionality?

  Thanks

  Ifra

• Ashleigh Rentz

  • 2021년 09월 16일 20:30

  Hi Ifra Saqlain — This works with plain Copenhagen, no changes needed.  :)  I used a little CSS to put things on a single row just so the screenshot wouldn't be huge, but otherwise this is all from the JavaScript.

• Ifra Saqlain

  • 2021년 09월 21일 16:53

  Community Moderator

  

  

  

  @Ashleigh Rentz, it's working perfectly, I tried it again  into fresh Copenhagen Theme and working as expected :)

  It's really cool !

댓글을 남기려면 로그인하세요.