detecting / using custom fullscreen icon paths

[benjibee]

While this may not be the best method of doing this, it works for me, and may be needed by others!

[desandro]

Hello! Thank you for this contribution. Yeah, I wondered if anyone would like a custom fullscreen button shapes, similar to the arrowShape option.

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

You can copy/paste this code before you initialize Flickity to use these options

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

// init Flickity
new Flickity( '.carousel', {
  // custom fullscreen button shapes
  viewFullscreenButtonShape: '...',
  exitFullscreenButtonShape: '...',
});

I've opened #17 to track interest

[kaleidografik]

@desandro @benjibee - 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',
});