[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 Groups Widget Block class.
  20   *
  21   * @since 9.0.0
  22   */
  23  class bpGroupsWidgetBlock extends dynamicWidgetBlock {
  24      loop( groups = [], container = '', type = 'active' ) {
  25          const tmpl = super.useTemplate( 'bp-dynamic-groups-item' );
  26          const selector = document.querySelector( '#' + container );
  27          let output = '';
  28  
  29          if ( groups && groups.length ) {
  30              groups.forEach( ( group ) => {
  31                  if ( 'newest' === type && group.created_since ) {
  32                      /* translators: %s is time elapsed since the group was created */
  33                      group.extra = sprintf( __( 'Created %s', 'buddypress' ), group.created_since );
  34                  } else if ( 'popular' === type && group.total_member_count ) {
  35                      const membersCount = parseInt( group.total_member_count, 10 );
  36  
  37                      if ( 0 === membersCount ) {
  38                          group.extra = __( 'No members', 'buddypress' );
  39                      } else if ( 1 === membersCount ) {
  40                          group.extra = __( '1 member', 'buddypress' );
  41                      } else {
  42                          /* translators: %s is the number of Group members */
  43                          group.extra = sprintf( __( '%s members', 'buddypress' ), group.total_member_count );
  44                      }
  45                  } else {
  46                      /* translators: %s: last activity timestamp (e.g. "Active 1 hour ago") */
  47                      group.extra = sprintf( __( 'Active %s', 'buddypress' ), group.last_activity_diff );
  48                  }
  49  
  50                  /* Translators: %s is the group's name. */
  51                  group.avatar_alt = sprintf( __( 'Group Profile photo of %s', 'buddypress' ), group.name );
  52  
  53                  output += tmpl( group );
  54              } );
  55          } else {
  56              output = '<div class="widget-error">' + __( 'There are no groups to display.', '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 groups.
  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.bpDynamicGroupsSettings || {};
  92  const blocks = window.bpDynamicGroupsBlocks || [];
  93  const bpDynamicGroups = new bpGroupsWidgetBlock( settings, blocks );
  94  
  95  if ( 'loading' === document.readyState ) {
  96      document.addEventListener( 'DOMContentLoaded', bpDynamicGroups.start() );
  97  } else {
  98      bpDynamicGroups.start();
  99  }