metafizzy / metafizzy/flickity-fullscreen

Custom fullscreen button shapes

Open
#17 3 comments 19 reactions 0 assignees View on GitHub
feature request
Dominant language
HTML
Stars
49
Forks
16
PR merge metrics
No merged PRs in 30d

Description

You may want to set your own custom icon shape for the fullscreen buttons, similar to how you can with [`arrowShape`](https://flickity.metafizzy.co/options.html#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](http://metafizzy.co/blog/use-github-reactions-delete-plus-1-comments/).

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.

``` js
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

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at Flickity.FullscreenButton.prototype.createIcon and compare it with the existing arrowShape option behavior. Add support for the proposed viewFullscreenButtonShape and exitFullscreenButtonShape options, accepting SVG path data for the view and exit buttons; done means custom shapes can replace both default fullscreen icons.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.