Añadir un botón de encuesta en la parte inferior del editor

Desarrollador
7

Esto es en realidad más complicado de lo que parece (¿qué tan difícil puede ser mover un botón, verdad? :slight_smile:

Lo intenté brevemente y parece que la forma menos desordenada es asignar la barra de herramientas del editor del compositor a una propiedad del controlador a la que luego puedas acceder en el outlet.

Si intentas recrear el comportamiento de la barra de herramientas, te encontrarás con los problemas inmediatos que mencionó @spirobel, pero probablemente también te encontrarás con otros problemas más adelante a medida que se ajusten la lógica de análisis de texto.

El principio básico es intentar utilizar la funcionalidad en el nivel más alto de abstracción, es decir, necesitamos la barra de herramientas del editor del compositor en sí… así que obtengámosla.

Es decir:

api.modifyClass("component:d-editor", {
  @on('didInsertElement')
  makeToolbarAccessible() {
    if (this.outletArgs && this.outletArgs.editorType === 'composer') {
      const controller = getOwner(this).lookup('controller:composer');
      controller.set('editorToolbar', this.toolbar);
    }
  }
});

Luego, en el outlet, obtenemos la barra de herramientas desde el controlador del compositor y agregamos un nuevo botón. Puede que haya una forma de usar el botón de encuesta existente (lo cual sería ideal), pero está encapsulado en la lógica de popupMenu y no logré ver una manera de extraerlo.

setupComponent(attrs, ctx) {
  const controller = getOwner(this).lookup('controller:composer');
  
  controller.addObserver('editorToolbar', function() {
    if (this._state === 'destroying') return;

    const toolbar = controller.editorToolbar;
          
    toolbar.addButton({
      group: "extras",
      icon: "chart-bar",
      title: "poll.ui_builder.title",
      sendAction: e => {
        controller.send('storeToolbarState', e);
        this.send("showPollBuilder");
      }
    });
    
    const extras = toolbar.groups.find(g => g.group == 'extras');
    const pollButton = extras.buttons.find(b => b.icon == "chart-bar");
        
    ctx.set('pb', pollButton);
  });
}

Luego, en la plantilla en sí:

{{d-button
  type="button"
  action=pb.action
  actionParam=pb
  translatedTitle=pb.title
  icon=pb.icon
  class=pb.className}}

@nexo Pruébalo con este componente de tema: discourse-poll-button-bottom.zip (2.5 KB)

P.D. Acabo de cargarlo en thepavilion.io y parece estar funcionando (solo en móviles).

4 Me gusta