Toolbar

This section specifies the way in which the toolbar is defined, as well as the plugin's state. The plugin's state is a JS object that contains information necessary for correctly displaying the plugin's instance. Normally, the content author can modify some attributes of the state of a plugin's instance through the toolbar on the side of the application.

getToolbar

This method is used for configuring the buttons that will appear in the toolbar. Basically, it is made of three parts: tabs, accordions and buttons (at the moment tabs are disabled since there is only one called Main).

getToolbar: function (state) {
  return {
    main: {
      __name: "Main",
      accordions: {
        basic: {
          __name: 'Video',
          icon: 'link',
          buttons: {
            url: {
              __name: 'URL',
              type: 'text',
              value: state.url,
              autoManaged: false
            },
            controls: {
              __name: 'Controls',
              type: 'checkbox',
              checked: state.controls,
              autoManaged: false
            },
            autoplay: {
              __name: 'Autoplay',
              type: 'checkbox',
              checked: state.autoplay,
              autoManaged: false
            }
          }
        },
        style: {
          __name: 'Style',
          icon: 'palette',
          buttons: {
            padding: {
              __name: 'Padding',
              type: 'number',
              value: 0,
              min: 0,
              units: 'px',
              max: 100
            },
            borderStyle: {
              __name: 'Border style',
              type: 'select',
              value: 'solid',
              options: ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial', 'inherit']
            },
            borderColor: {
              __name: 'Border color',
              type: 'color',
              value: '#000000'
            }
          }
        }
      }
    }
  };
}

As we can see, as in getConfig here an object with the whole structure is returnet. In the following section the structure will be explained and its descendants.

• This object will have as many properties as the tabs (as we said before that meanwhile only one can exist, "main" tab). Obviously, there can't be two tabs with the same name.

• Each tab will be at the same time an object with two properties, __name (that is a text chain that can have any desired value, even the ones got from translation files) and accordions, that is a dictionary with all the accordions that contains this tab.

• Every of the accordions will have a unique key by the one that would be identified and a series of properties:

  • __name: name that will be shown in the toolbars.
  • icon: icon that will be shown (it will be chosen from the same list).
  • buttons: object that contains all the buttons of the accordion.
  • accordions: object with the subaccordions that will be contained. They would be in form except by the fact that can't contain subaccordions at the same time.
  • order (optional): array that contains the button keys and subaccordions in the order that is desired to be shown in the toolbar.

• Every single button will be an object with the following properties too:

  • __name: name that will be shown in the toolbar.
  • type: tells the kind of control show in the toolbar. One of the following:
    • color: overwrites the input native color of HTML to allow color selection with the transparency level.
    • radio: Input radio. To choose between n options.
    • fancy_radio: DEPRECATED The same input as *radio* but with icons as buttons instead of text. Requires some aditional fields exclusive for this plugin:
    • checkbox: Checkbox input. (Uses checked instead of value).
    • extenal_provider: Allows to search a file in the content libary and other Ediphy APIs. It can specify an additional accept field containing the accepted MIME types.
    • text: Text input.
    • number: Numbers input
    • range: Range input (slider).
    • select: Select input. Needs options field with an array where to choose from.
  • options: the options that will be shown. It is neccesary for select, radio and fancy_radio.
  • tooltips: text to be shown when hovering every button with the mouse. Exclusive of fancy_radio.
  • icons: Material icon name for each options (ej. 'warning'). Excluve of fancy_radio. It will be chonse from the list from material icons. It is specified in form of an array of strings in the same order of the options.
  • value: the value that is going to have. In case of being of the kind "checkbox", instead of value, it will be checked.
  • units: the units that is going to have, if that makes sense (i.e, "px" or "%" for a number or a range)
  • min: the minimum value that is going to have, if that makes sense (i.e., for a number or a range).
  • max: the maximum value that is going to have, if that makes sense (i.e., for a number or a range).
  • step: minimum change, if that makes sense (i.e., for a number or a range).
  • accept: accepted MIME type. Exclusive of the external_provider button type.

  Each plugin has 3 main parts: the structure, the style, and the state. The structure is related to the size and positioning of the box containing an instance of the plugin; by default an accordion named Structure will be created with the necessary buttons for this purpose. The style also applies to said box. Ediphy is in charge of applying the defined CSS properties to the box but, contrary to the structure, they need to be explicitly defined in the toolbar object. Lastly, the state contains information regarding the specific content of the plugin, normally things that the user can customize. You can create as many accordions and buttons as you want in order to facilitate the customization of the state fields, as seen in the previous example.

getInitialState

This method returns an object containing the plugin's initial state. Ediphy is in charge of persisting the values of each instance and modifying them every time the user manipulates the toolbar.

getInitialState: function () {
  return {
    url: 'http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png'
  };
}

If you would like to know how to link the plugin's state with the interface that the user will see when creating content, check the Interface section.