Usage in JavaScript

Content Browser can be called at will anywhere from your JavaScript code.

Installing the Content Browser plugin

Content Browser JavaScript module was preinstalled for you when you installed Content Browser via Composer. Activate it in your setup with:

$ yarn add file:vendor/netgen/content-browser-ui

or

$ npm install file:vendor/netgen/content-browser-ui

Usage

To initialize Content Browser and use it in JavaScript on custom events you can use the Browser plugin.

Import and initialize the plugin:

import { Browser } from '@netgen/content-browser-ui';

// create new Content Browser instance
const browser = new Browser(config);

// open the browser
browser.open();

Plugin accepts JavaScript object as options for that instance. For example:

import { Browser } from '@netgen/content-browser-ui';

// create new Content Browser instance
const browser = new Browser({
  overrides: {
    has_preview: false,
    max_selected: 4,
  },
  itemType: 'ibexa_location',
  onConfirm: function(selected) {
    // onConfirm function returns selected items
    console.log(selected);
  },
  onCancel: function() {
    console.log('Browser closed');
  },
});

// open the browser
browser.open();

Required parameters for Content Browser config

• itemType

  Item type to select in the dialog.

  type: string

Optional parameters for Content Browser config

• onCancel

  Function that is called after browser is closed without selecting the items.

  type: function

• onConfirm

  Function that is called after selecting the items and confirming in Content Browser.

  Function returns an array of selected items.

  type: function

• disabledItems

  Array of item IDs that should be disabled for selection in Content Browser.

  type: array

• overrides

  Object with overrides for configuration initially specified via backend REST API after opening Content Browser.

  type: object

Using CSS

You need to include the CSS file for Content Browser for it to be displayed properly. You can import the styles in your SCSS file:

@import "@netgen/content-browser-ui/bundle/Resources/public/css/main";

You also need to configure sass-loader to understand imports from node_modules directory:

{
  loader: 'sass-loader',
  options: {
    includePaths: ['./node_modules']
  }
}

or import the file with a path relative to your SCSS file:

@import "../node_modules/@netgen/content-browser-ui/bundle/Resources/public/css/main";