Custom fullscreen button shapes

[desandro]

You may want to set your own custom icon shape for the fullscreen buttons, similar to how you can with arrowShape.

---

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

I would implement this feature by add two new options: viewFullscreenButtonShape and exitFullscreenButtonShape.

---

Here's a duck-punch to implement custom buttons in your code. You can copy/paste this code before you initialize Flickity to use these options.

var pathDirections = {
  view: 'M12,0v4H4v8H0V0H12z M32,32V20h-4v8h-8v4H32z M32,0H20v4h8v8h4V0z M0,32h12v-4H4v-8H0V32z',
  exit: 'M12,12V0H8v8H0v4H12z M16,12h12V8h-8V0h-4V12z M16,16v12h4v-8h8v-4H16z M12,16H0v4h8v8h4V16z',
};

var svgURI = 'http://www.w3.org/2000/svg';

Flickity.FullscreenButton.prototype.createIcon = function() {
  var svg = document.createElementNS( svgURI, 'svg');
  svg.setAttribute( 'class', 'flickity-button-icon' );
  svg.setAttribute( 'viewBox', '0 0 32 32' );
  // path & direction
  var path = document.createElementNS( svgURI, 'path');
  var direction = pathDirections[ this.name ];
  path.setAttribute( 'd', direction );
  // put it together
  svg.appendChild( path );
  this.element.appendChild( svg );
};

// init Flickity
new Flickity( '.carousel', {
  fullscreen: true,
});

You'll need to pathDirections.view and .exit to an SVG path, with a viewbox of 32 x 32. See demo on CodePen: https://codepen.io/desandro/pen/ZVpVYK?editors=0010

[kaleidografik]

@desandro - Have tried to implement this as per the above instructions, however I am getting a console error which is breaking the slider.

My code is below, and as you can see I've included the above code before initialisation.

Any idea how to resolve?

Flickity.defaults.viewFullscreenButtonShape = 'M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z';
Flickity.defaults.exitFullscreenButtonShape = 'M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z';

var svgURI = 'http://www.w3.org/2000/svg';

Flickity.FullscreenButton.prototype.createIcon = function() {
  var svg = document.createElementNS( svgURI, 'svg');
  svg.setAttribute( 'class', 'flickity-button-icon' );
  svg.setAttribute( 'viewBox', '0 0 32 32' );
  // path & direction
  var path = document.createElementNS( svgURI, 'path');
  direction = this.options[ this.name + 'FullscreenButtonShape' ];
  path.setAttribute( 'd', direction );
  // put it together
  svg.appendChild( path );
  this.element.appendChild( svg );
};

// Slideshow block
var slider = ('.custom-block.slideshow .flickity');

// Init
$(slider).flickity({
	// Options
	cellAlign: 'left',
	imagesLoaded: true,
	adaptiveHeight: true,
	prevNextButtons: true,
    arrowShape: 'M0,49.8l33.1-33.2h27L36.8,39.8h63.3v19.7H36.7l23.5,23.4H33.2L0,49.8z',
	pageDots: false,
    fullscreen: true,
    viewFullscreenButtonShape: 'M64.8,63.9l0.2,36.1H34.9V63.9H0v-28h34.9V0h30.2v35.9H100v28H64.8z',
    exitFullscreenButtonShape: 'M50,70.4L20.2,100L0,79.8l29.8-29.6L0,20.4L20.5,0L50,29.9L79.8,0L100,20.4L70.2,50L100,79.8L79.8,100L50,70.4z',
});

[desandro]

@kaleidografik Sorry about that. I've updated the top comment with correct code, instructions, and CodePen demo

[kaleidografik]

Excellent, thanks @desandro - would love to see this added to core in future.