Aggiungi un pulsante per sondaggi nella parte inferiore del compositore

Sviluppatore
7

In realtà è più complicato di quanto sembri (quanto può essere difficile spostare un pulsante a destra? :))

Ho affrontato brevemente la questione e sembra che il modo meno disordinato sia assegnare la barra degli strumenti dell’editor del compositore a una proprietà del controller, che potrai poi accedere nell’outlet.

Se provi a ricreare il comportamento della barra degli strumenti, incontri immediatamente i problemi menzionati da @spirobel, ma probabilmente ne incontrerai altri in seguito man mano che la logica di analisi del testo viene modificata.

Il principio di base è cercare di utilizzare la funzionalità al livello più alto di astrazione, cioè abbiamo bisogno della barra degli strumenti dell’editor del compositore effettivo… quindi prendiamola.

Cioè:

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);
    }
  }
});

Quindi nell’outlet otteniamo la barra degli strumenti dal controller del compositore e aggiungiamo un nuovo pulsante. Potrebbe esserci un modo per utilizzare il pulsante esistente per i sondaggi (sarebbe l’ideale), ma è incapsulato nella logica di popupMenu e non sono riuscito a vedere un modo per estrarlo.

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);
  });
}

Quindi nel template stesso:

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

@nexo Dai un’occhiata a questo componente del tema: discourse-poll-button-bottom.zip (2,5 KB)

P.S. L’ho appena caricato su thepavilion.io e sembra funzionare (solo su mobile).