[Summary view] [Print] [Text view]

   1  /**
   2   * WordPress dependencies.
   3   */
   4  const {
   5      i18n: {
   6          __,
   7          sprintf,
   8      },
   9  } = wp;
  10  
  11  /**
  12   * BuddyPress dependencies.
  13   */
  14  const {
  15      dynamicWidgetBlock,
  16  } = bp;
  17  
  18  /**
  19   * Front-end Dynamic Members Widget Block class.
  20   *
  21   * @since 9.0.0
  22   */
  23  class bpMembersWidgetBlock extends dynamicWidgetBlock {
  24      loop( members = [], container = '', type = 'active' ) {
  25          const tmpl = super.useTemplate( 'bp-dynamic-members-item' );
  26          const selector = document.querySelector( '#' + container );
  27          let output = '';
  28  
  29          if ( members && members.length ) {
  30              members.forEach( ( member ) => {
  31                  if ( 'active' === type && member.last_activity ) {
  32                      /* translators: %s: last activity timestamp (e.g. "Active 1 hour ago") */
  33                      member.extra = sprintf( __( 'Active %s', 'buddypress' ), member.last_activity.timediff );
  34                  } else if ( 'popular' === type && member.total_friend_count ) {
  35                      const friendsCount = parseInt( member.total_friend_count, 10 );
  36  
  37                      if ( 0 === friendsCount ) {
  38                          member.extra = __( 'No friends', 'buddypress' );
  39                      } else if ( 1 === friendsCount ) {
  40                          member.extra = __( '1 friend', 'buddypress' );
  41                      } else {
  42                          /* translators: %s: total friend count (more than 1). */
  43                          member.extra = sprintf( __( '%s friends', 'buddypress' ), member.total_friend_count );
  44                      }
  45                  } else if ( 'newest' === type && member.registered_since ) {
  46                      /* translators: %s is time elapsed since the registration date happened */
  47                      member.extra = sprintf( __( 'Registered %s', 'buddypress' ), member.registered_since );
  48                  }
  49  
  50                  /* translators: %s: member name */
  51                  member.avatar_alt = sprintf( __( 'Profile picture of %s', 'buddypress' ), member.name );
  52  
  53                  output += tmpl( member );
  54              } );
  55          } else {
  56              output = '<div class="widget-error">' + __( 'No members found.', 'buddypress' ) + '</div>';
  57          }
  58  
  59          selector.innerHTML = output;
  60      }
  61  
  62      start() {
  63          this.blocks.forEach( ( block, i ) => {
  64              const { selector } = block;
  65              const { type } = block.query_args;
  66              const list = document.querySelector( '#' + selector ).closest( '.bp-dynamic-block-container' );
  67  
  68              // Get default Block's type members.
  69              super.getItems( type, i );
  70  
  71              // Listen to Block's Nav item clics
  72              list.querySelectorAll( '.item-options a' ).forEach( ( navItem ) => {
  73                  navItem.addEventListener( 'click', ( event ) => {
  74                      event.preventDefault();
  75  
  76                      // Changes the displayed filter.
  77                      event.target.closest( '.item-options' ).querySelector( '.selected' ).classList.remove( 'selected' );
  78                      event.target.classList.add( 'selected' );
  79  
  80                      const newType = event.target.getAttribute( 'data-bp-sort' );
  81  
  82                      if ( newType !== this.blocks[ i ].query_args.type ) {
  83                          super.getItems( newType, i );
  84                      }
  85                  } );
  86              } );
  87          } );
  88      }
  89  }
  90  
  91  const settings = window.bpDynamicMembersSettings || {};
  92  const blocks = window.bpDynamicMembersBlocks || {};
  93  const bpDynamicMembers = new bpMembersWidgetBlock( settings, blocks );
  94  
  95  if ( 'loading' === document.readyState ) {
  96      document.addEventListener( 'DOMContentLoaded', bpDynamicMembers.start() );
  97  } else {
  98      bpDynamicMembers.start();
  99  }