fancybox toolbar for html content type

[NoxChist]

Describe the bug

standard buttons are not added to the toolbar in enabled toolbar for fancy with html content

Reproduction

this method for img gallery works good

methods: {
startFancy() {
  const options = {
    Toolbar: {
      display: {
        left: [],
        middle: ["zoomIn", "zoomOut"],
        right: ["download", "close"],
      },
    },
  };
  Fancybox.show(this.images, options);
}

and I get

<div class="fancybox__container has-toolbar" role="dialog" aria-modal="true" aria-label="You can close this modal content with the ESC key" tabindex="-1" id="fancybox-1" aria-hidden="false"><div class="fancybox__toolbar"><div class="fancybox__toolbar__column is-left"></div><div class="fancybox__toolbar__column is-middle"><button title="Zoom in" class="f-button" data-panzoom-action="zoomIn"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7.5"></circle><path d="m21 21-4.35-4.35M11 8v6M8 11h6"></path></svg></button><button title="Zoom out" class="f-button" data-panzoom-action="zoomOut" disabled="" tabindex="-1"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7.5"></circle><path d="m21 21-4.35-4.35M8 11h6"></path></svg></button></div><div class="fancybox__toolbar__column is-right"><a class="f-button" title="Download" data-fancybox-download="" href="/src/assets/images/img/1.jpg" download="/src/assets/images/img/1.jpg" target="_blank"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12"></path></svg></a><button class="f-button" title="Close" data-fancybox-close=""><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 4.5-15 15M4.5 4.5l15 15"></path></svg></button></div></div>
<div class="fancybox__backdrop"></div>
<div class="fancybox__carousel is-ltr is-horizontal has-thumbs"><div class="fancybox__viewport is-draggable"><div class="fancybox__track" aria-live="polite" style="transform: matrix(1, 0, 0, 1, 0, 0);"><div class="fancybox__slide has-image is-selected can-zoom_in is-done" data-index="0"><div class="fancybox__content" style="width: 765.323px; height: 579.082px; transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/src/assets/images/img/1.jpg" alt="Image 1 of 4" draggable="false" fetchpriority="high" class="fancybox-image"></div></div><div class="fancybox__slide has-image is-done" data-index="1" aria-hidden="true"><div class="fancybox__content" style="width: 765.323px; height: 446.937px; transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/src/assets/images/img/2.jpg" alt="Image 2 of 4" draggable="false" class="fancybox-image"></div></div><div class="fancybox__slide has-image is-done" data-index="3" aria-hidden="true" style="left: -2326px;"><div class="fancybox__content" style="width: 765.323px; height: 510.464px; transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/src/assets/images/img/4.jpg" alt="Image 4 of 4" draggable="false" class="fancybox-image"></div></div></div></div><div class="fancybox__nav"><button tabindex="0" title="Next" class="f-button is-next" data-carousel-next="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"></path></svg></button><button tabindex="0" title="Previous" class="f-button is-prev" data-carousel-prev="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"></path></svg></button></div></div>

but when I used this method for html content

methods: {
startFancy(pdfSrc) {
  const options = {
    Toolbar: {
      enabled: true,
      absolute:false,
      display: {
        left: [],
        middle: ["zoomIn", "zoomOut"],
        right: ["download", "close"],
      },
    }
  };
  const app = createApp(PdfViewer, {  pdfSrc });
  const vm = app.mount(document.createElement('div'));

  Fancybox.show([
    {
      src: vm.$el,
      type:"html",
    },
  ], options);
}},

I get

<div class="fancybox__container is-compact has-toolbar" role="dialog" aria-modal="true" aria-label="You can close this modal content with the ESC key" tabindex="-1" id="fancybox-1" aria-hidden="false"><div class="fancybox__toolbar"><div class="fancybox__toolbar__column is-left"></div><div class="fancybox__toolbar__column is-middle"></div><div class="fancybox__toolbar__column is-right"><button class="f-button" title="Close" data-fancybox-close=""><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 4.5-15 15M4.5 4.5l15 15"></path></svg></button></div></div>
<div class="fancybox__backdrop"></div>
<div class="fancybox__carousel is-ltr is-horizontal"><div class="fancybox__viewport"><div class="fancybox__track" aria-live="polite" style="transform: matrix(1, 0, 0, 1, 0, 0);"><div class="fancybox__slide has-html is-selected is-done" data-index="0"><div pdfsrc="/src/assets/textDoc.pdf" class="fancybox__content"><div><button> Prev </button><span>1 / 5</span><button> Next </button></div><div style="position: relative; display: block; overflow: hidden; --scale-factor: 1;"><canvas dir="ltr" style="display: block; width: 595px; height: 841px;" width="2380" height="3367"></canvas><!----><!----><div style="display: block;"></div><div style="position: absolute; width: 595px; height: 841px; top: 0px; left: 0px; display: none;"></div></div></div></div></div></div></div>
<div class="fancybox__footer"></div>

Why is this happening? maybe I'm doing something wrong?

Additional context

No response

[fancyapps]

Hi

Perhaps there should be a more prominent warning, but there is an explanation at the beginning of the documents -

Since the toolbar is primarily useful for images, it is automatically disabled if there are no images in the current gallery. Set the option enabled: true to display a toolbar for any type of content.

https://fancyapps.com/fancybox/plugins/toolbar/

[NoxChist]

Sorry, but you probably didn’t look carefully at the presented method; the toolbar is enabled in it

methods: { startFancy(pdfSrc) { const options = { Toolbar: { enabled: true, absolute:false, display: { left: [], middle: ["zoomIn", "zoomOut"], right: ["download", "close"], }, } }; const app = createApp(PdfViewer, { pdfSrc }); const vm = app.mount(document.createElement('div'));

Fancybox.show([ { src: vm.$el, type:"html", }, ], options); }},

and I get the container fancybox__container is-compact has-toolbar

[fancyapps]

Hmm, can you show some live demo?

[fancyapps]

In general, the toolbar is not shown if there is no point in showing it. For example, what's the point of zoom in/out buttons if they won't work, or show a slideshow, next/prev arrows if there's no gallery, show a thumbnail icon if there's no thumbs, etc.

[fancyapps]

I've created two demos showing how to display download and close buttons on the toolbar for any content type:

https://jsfiddle.net/qbu1p45z/

<button data-fancybox data-src="#dialog-content" data-download-src="https://fancyapps.com/sample.pdf">Launch Dialog</button>

Fancybox.bind('[data-fancybox]', {
  Toolbar: {
    enabled: true,
    absolute:false,
    display: {
      left: [],
      right: ["download", "close"],
    },
  }
});    

https://jsfiddle.net/fgdnmjhv/

Fancybox.show([{
  src : "#dialog-content",
  type: "clone",
  downloadSrc: "https://fancyapps.com/sample.pdf"
}], {
  Toolbar: {
    enabled: true,
    absolute:false,
    display: {
      left: [],
      right: ["download", "close"],
    },
  }
});