metafizzy / metafizzy/flickity-fullscreen
Custom fullscreen button shapes
- 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