Toolbar_es

En esta sección se detallará la forma en la que se define la barra de herramientas lateral del plugin, así como su estado particular. El estado de un plugin es un objeto JavaScript que contiene información necesaria para poder mostrar adecuadamente una instancia del plugin. Normalmente, el autor de contenidos de Ediphy puede modificar algunas propiedades del estado de una instancia del plugin a través de la barra de herramientas lateral.

getToolbar

Este método se emplea para configurar los botones que queremos que aparezcan en la barra de herramientas. Básicamente se compone de tres partes: pestañas, acordeones y botones (las pestañas por el momento están deshabilitadas ya que sólo puede haber una, la pestaña principal o "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'
            }
          }
        }
      }
    }
  };
}

Como se puede ver, al igual que en getConfig aquí se devuelve un objeto con toda la estructura. A continuación se explicará su estructura y la de sus descendientes.

• Este objeto va a tener como propiedades las pestañas (ya hemos dicho antes que de momento sólo puede haber una, que es la pestaña "main"). Obviamente, no puede haber dos pestañas con el mismo nombre

• Cada pestaña será al mismo tiempo un objeto con dos propiedades, __name (que es una cadena de texto y puede tener el valor que se desee, incluso sacado de los ficheros de traducción) y accordions, que es un diccionario con todos los acordeones que contiene esta pestaña.

• Cada uno de los acordeones tendrá una clave única por el que se le identificará y una serie de propiedades:

  • __name: nombre que se mostrará en la barra de herramientas.
  • icon: icono que se mostrará (se elegirá de la misma lista).
  • buttons: objeto con todos los botones que contendrá el acordeón.
  • accordions: objeto con los subacordeones que estarán contenidos. Serán iguales en forma excepto por el hecho de que no pueden contener subacordeones a su vez.
  • order (opcional): array que contiene las claves de los botones y subacordeones en el orden en el que se desea que se muestren en la barra de herramientas.

• Cada uno de los botones será también un objeto con las siguientes propiedades:

  • __name: nombre que se mostrará en la barra de herramientas.
  • type: determinará el tipo de control mostrado en la barra de herramientas. Uno de los siguientes:
    • color: Sobreescribe el input de color nativo de HTML para permitir la selección de colores con nivel de transparencia.
    • radio: Input radio. A elegir una de N opciones.
    • fancy_radio: DEPRECATED Igual que input *radio* pero con iconos como botones en lugar de texto. Requiere algunos campos adicionales exclusivos de este plugin:
    • checkbox: Input checkbox. (Usa checked en lugar de value).
    • external_provider: Permite buscar un archivo en la biblioteca y demás APIs de Ediphy. Se puede especificar el tipo MIME de los ficheros aceptados con un campo adicional accept.
    • text: Input de texto.
    • number: Input numérico.
    • range: Input de rango (slider).
    • select: Input select. Precisa el campo options con un array de los valores entre los que elegir.
  • options: las opciones que va a mostrar. Es necesario para select, radio y fancy_radio.
  • tooltips: Texto a mostrar al pasar por encima de cada botón con el ratón. Exclusivo de fancy_radio.
  • icons: Nombre Material icon para cada opción (ej. 'warning'). Exclusivo de fancy_radio. Se elegirá de la lista de material icons. Se especifica en forma de array de strings en el mismo orden que las options.
  • value: el valor que va a tener. En caso de ser de tipo "checkbox", en vez de value, será checked.
  • units: las unidades que va a tener, si es que tiene sentido (por ejemplo, "px" o "%" para un number o un range).
  • min: valor mínimo que puede tener, si es que tiene sentido (por ejemplo, para un number o un range).
  • max: valor máximo que puede tener, si es que tiene sentido (por ejemplo, para un number o un range).
  • step: cambio mínimo, si es que tiene sentido (por ejemplo, para un number o un range).
  • accept: tipo MIME aceptado. Exclusivo del botón de tipo external_provider.

  Cada plugin tiene 3 partes principales: la estructura (structure), el estilo (style) y el estado (state). La estructura tiene que ver con el tamaño y posicionamiento de la caja creada a partir del plugin. Por defecto se creará un acordeón llamado Estructura que contendrá los controles necesarios para este cometido, sin necesidad de definirlo a la hora de crear el plugin. El estilo tiene que ver con el estilo de la caja, no con el estilo de su interior. Ediphy se encarga de asociar las propiedades CSS incluidas en el acordeón style con el estilo de la caja. Por último, el estado contendrá la información relativa a cada instancia concreta del plugin, como se verá en el apartado siguiente. El desarrollador puede crear todas los acordeones y botones que necesite para que el usuario pueda configurar todos los campos del estado del plugin, espcificando con cuál de ellos está asociado, como se ve en el ejemplo anterior.

getInitialState

Aquí se define el estado que se quiera que tenga el plugin. Ediphy se encarga de mantener los valores de cada instancia y de modificar el estado cada vez que se maneja la toolbar.

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

Para saber cómo asociar el estado con la interfaz que verá el usuario al crear contenido con el plugin, consulta la sección Interfaz