[Summary view] [Print] [Text view]

   1  /**
   2   * WordPress dependencies.
   3   */
   4  const {
   5      url: {
   6          addQueryArgs,
   7      },
   8  } = wp;
   9  
  10  /**
  11   * External dependencies.
  12   */
  13  const {
  14      template,
  15  } = lodash;
  16  
  17  // Use the bp global.
  18  window.bp = window.bp || {};
  19  
  20  /**
  21   * Generic class to be used by Dynamic Widget Blocks.
  22   *
  23   * @since 9.0.0
  24   */
  25  bp.dynamicWidgetBlock = class bpDynamicWidgetBlock {
  26      constructor( settings, blocks ) {
  27          const { path, root, nonce } = settings;
  28          this.path = path;
  29          this.root = root;
  30          this.nonce = nonce,
  31          this.blocks = blocks;
  32  
  33          this.blocks.forEach( ( block, i ) => {
  34              const { type } = block.query_args || 'active';
  35              const { body } = block.preloaded || [];
  36  
  37              this.blocks[ i ].items = {
  38                  'active': [],
  39                  'newest': [],
  40                  'popular': [],
  41                  'alphabetical': [],
  42              }
  43  
  44              if ( ! this.blocks[ i ].items[ type ].length && body && body.length ) {
  45                  this.blocks[ i ].items[ type ] = body;
  46              }
  47          } );
  48      }
  49  
  50      useTemplate( tmpl ) {
  51          const options = {
  52              evaluate:    /<#([\s\S]+?)#>/g,
  53              interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
  54              escape:      /\{\{([^\}]+?)\}\}(?!\})/g,
  55              variable:    'data'
  56          };
  57  
  58          return template( document.querySelector( '#tmpl-' + tmpl ).innerHTML, options );
  59      }
  60  
  61      loop() {
  62          // This method needs to be overriden.
  63      }
  64  
  65      getItems( type = 'active', blockIndex = 0 ) {
  66          this.blocks[ blockIndex ].query_args.type = type;
  67  
  68          if ( this.blocks[ blockIndex ].items[ type ].length ) {
  69              this.loop( this.blocks[ blockIndex ].items[ type ], this.blocks[ blockIndex ].selector, type );
  70          } else {
  71              fetch( addQueryArgs( this.root + this.path, this.blocks[ blockIndex ].query_args ), {
  72                  method: 'GET',
  73                  headers: {
  74                      'X-WP-Nonce' : this.nonce,
  75                  }
  76              } ).then(
  77                  ( response ) => response.json()
  78              ).then(
  79                  ( data ) => {
  80                      this.blocks[ blockIndex ].items[ type ] = data;
  81                      this.loop( this.blocks[ blockIndex ].items[ type ], this.blocks[ blockIndex ].selector, type );
  82                  }
  83              );
  84          }
  85      }
  86  };