Unverified Commit 630cd36d authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3208372 by paulocs, mherchel, Gauravmahlawat: Olivero: Refactor comments.es6.js

parent 4855e96b

core/themes/olivero/js/comments.es6.js

+53 −29
Original line number Diff line number Diff line 
/**

 * @file

 * Comments.

 * Adds show/hide functionality for indented comments.

 */



((Drupal) => {

  const indentedComments = document.querySelectorAll('.comments .indented');



  document.querySelectorAll('.comment').forEach((comment) => {

((Drupal, once) => {

  /**

   * Init function for comments.

   *

   * @param {object} comments

   *   The comment section.

   */

  function init(comments) {

    comments

      .querySelectorAll('[data-drupal-selector="comment"]')

      .forEach((comment) => {

        if (

          comment.nextElementSibling != null &&

          comment.nextElementSibling.matches('.indented')
@@ -15,7 +22,7 @@ 
        }

      });



  indentedComments.forEach((commentGroup) => {

    comments.querySelectorAll('.indented').forEach((commentGroup) => {

      const showHideWrapper = document.createElement('div');

      showHideWrapper.setAttribute('class', 'show-hide-wrapper');
@@ -36,4 +43,21 @@ 
        );

      });

    });

})(Drupal);
 
  }



  /**

   * Attaches the comment behavior to comments.

   *

   * @type {Drupal~behavior}

   *

   * @prop {Drupal~behaviorAttach} attach

   *   Attaches the show/hide behavior for indented comments.

   */

  Drupal.behaviors.comments = {

    attach(context) {

      once('comments', '[data-drupal-selector="comments"]', context).forEach(

        init,

      );

    },

  };

})(Drupal, once);

core/themes/olivero/js/comments.js

+29 −22
Original line number Diff line number Diff line
@@ -5,14 +5,14 @@ 
* @preserve

**/



(function (Drupal) {

  var indentedComments = document.querySelectorAll('.comments .indented');

  document.querySelectorAll('.comment').forEach(function (comment) {

(function (Drupal, once) {

  function init(comments) {

    comments.querySelectorAll('[data-drupal-selector="comment"]').forEach(function (comment) {

      if (comment.nextElementSibling != null && comment.nextElementSibling.matches('.indented')) {

        comment.classList.add('has-children');

      }

    });

  indentedComments.forEach(function (commentGroup) {

    comments.querySelectorAll('.indented').forEach(function (commentGroup) {

      var showHideWrapper = document.createElement('div');

      showHideWrapper.setAttribute('class', 'show-hide-wrapper');

      var toggleCommentsBtn = document.createElement('button');
@@ -27,4 +27,11 @@ 
        e.currentTarget.setAttribute('aria-expanded', commentGroup.classList.contains('hidden') ? 'false' : 'true');

      });

    });

})(Drupal);
 
 No newline at end of file
 
  }



  Drupal.behaviors.comments = {

    attach: function attach(context) {

      once('comments', '[data-drupal-selector="comments"]', context).forEach(init);

    }

  };

})(Drupal, once);
 
 No newline at end of file

core/themes/olivero/templates/content/comment.html.twig

+1 −2
Original line number Diff line number Diff line
@@ -67,7 +67,6 @@ 
{%

  set classes = [

    'comment',

    'js-comment',

    not parent_comment ? 'comment--level-1',

    status != 'published' ? 'comment--' ~ status,

    comment.owner.anonymous ? 'by-anonymous',
@@ -75,7 +74,7 @@ 
  ]

%}

{{ attach_library('olivero/comments') }}

<article {{ attributes.addClass(classes).setAttribute('role', 'article') }}>

<article {{ attributes.addClass(classes).setAttribute('role', 'article').setAttribute('data-drupal-selector', 'comment') }}>

  <div class="comment__picture-wrapper">

    <div class="comment__picture">

      {{ user_picture }}

core/themes/olivero/templates/field/field--comment.html.twig

+1 −1
Original line number Diff line number Diff line
@@ -29,7 +29,7 @@ 
#}



{{ attach_library('olivero/comments') }}

<section{{ attributes.addClass('comments') }}>

<section{{ attributes.setAttribute('data-drupal-selector', 'comments').addClass('comments') }}>



  {% if comments and not label_hidden %}

    {{ title_prefix }}