123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211 |
- // prev/next buttons
- ( function( window, factory ) {
- // universal module definition
- /* jshint strict: false */
- if ( typeof define == 'function' && define.amd ) {
- // AMD
- define( [
- './flickity',
- 'unipointer/unipointer',
- 'fizzy-ui-utils/utils'
- ], function( Flickity, Unipointer, utils ) {
- return factory( window, Flickity, Unipointer, utils );
- });
- } else if ( typeof module == 'object' && module.exports ) {
- // CommonJS
- module.exports = factory(
- window,
- require('./flickity'),
- require('unipointer'),
- require('fizzy-ui-utils')
- );
- } else {
- // browser global
- factory(
- window,
- window.Flickity,
- window.Unipointer,
- window.fizzyUIUtils
- );
- }
- }( window, function factory( window, Flickity, Unipointer, utils ) {
- 'use strict';
- var svgURI = 'http://www.w3.org/2000/svg';
- // -------------------------- PrevNextButton -------------------------- //
- function PrevNextButton( direction, parent ) {
- this.direction = direction;
- this.parent = parent;
- this._create();
- }
- PrevNextButton.prototype = Object.create( Unipointer.prototype );
- PrevNextButton.prototype._create = function() {
- // properties
- this.isEnabled = true;
- this.isPrevious = this.direction == -1;
- var leftDirection = this.parent.options.rightToLeft ? 1 : -1;
- this.isLeft = this.direction == leftDirection;
- var element = this.element = document.createElement('button');
- element.className = 'flickity-button flickity-prev-next-button';
- element.className += this.isPrevious ? ' previous' : ' next';
- // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
- element.setAttribute( 'type', 'button' );
- // init as disabled
- this.disable();
- element.setAttribute( 'aria-label', this.isPrevious ? 'Previous' : 'Next' );
- // create arrow
- var svg = this.createSVG();
- element.appendChild( svg );
- // events
- this.parent.on( 'select', this.update.bind( this ) );
- this.on( 'pointerDown', this.parent.childUIPointerDown.bind( this.parent ) );
- };
- PrevNextButton.prototype.activate = function() {
- this.bindStartEvent( this.element );
- this.element.addEventListener( 'click', this );
- // add to DOM
- this.parent.element.appendChild( this.element );
- };
- PrevNextButton.prototype.deactivate = function() {
- // remove from DOM
- this.parent.element.removeChild( this.element );
- // click events
- this.unbindStartEvent( this.element );
- this.element.removeEventListener( 'click', this );
- };
- PrevNextButton.prototype.createSVG = function() {
- var svg = document.createElementNS( svgURI, 'svg');
- svg.setAttribute( 'class', 'flickity-button-icon' );
- svg.setAttribute( 'viewBox', '0 0 100 100' );
- var path = document.createElementNS( svgURI, 'path');
- var pathMovements = getArrowMovements( this.parent.options.arrowShape );
- path.setAttribute( 'd', pathMovements );
- path.setAttribute( 'class', 'arrow' );
- // rotate arrow
- if ( !this.isLeft ) {
- path.setAttribute( 'transform', 'translate(100, 100) rotate(180) ' );
- }
- svg.appendChild( path );
- return svg;
- };
- // get SVG path movmement
- function getArrowMovements( shape ) {
- // use shape as movement if string
- if ( typeof shape == 'string' ) {
- return shape;
- }
- // create movement string
- return 'M ' + shape.x0 + ',50' +
- ' L ' + shape.x1 + ',' + ( shape.y1 + 50 ) +
- ' L ' + shape.x2 + ',' + ( shape.y2 + 50 ) +
- ' L ' + shape.x3 + ',50 ' +
- ' L ' + shape.x2 + ',' + ( 50 - shape.y2 ) +
- ' L ' + shape.x1 + ',' + ( 50 - shape.y1 ) +
- ' Z';
- }
- PrevNextButton.prototype.handleEvent = utils.handleEvent;
- PrevNextButton.prototype.onclick = function() {
- if ( !this.isEnabled ) {
- return;
- }
- this.parent.uiChange();
- var method = this.isPrevious ? 'previous' : 'next';
- this.parent[ method ]();
- };
- // ----- ----- //
- PrevNextButton.prototype.enable = function() {
- if ( this.isEnabled ) {
- return;
- }
- this.element.disabled = false;
- this.isEnabled = true;
- };
- PrevNextButton.prototype.disable = function() {
- if ( !this.isEnabled ) {
- return;
- }
- this.element.disabled = true;
- this.isEnabled = false;
- };
- PrevNextButton.prototype.update = function() {
- // index of first or last slide, if previous or next
- var slides = this.parent.slides;
- // enable is wrapAround and at least 2 slides
- if ( this.parent.options.wrapAround && slides.length > 1 ) {
- this.enable();
- return;
- }
- var lastIndex = slides.length ? slides.length - 1 : 0;
- var boundIndex = this.isPrevious ? 0 : lastIndex;
- var method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable';
- this[ method ]();
- };
- PrevNextButton.prototype.destroy = function() {
- this.deactivate();
- this.allOff();
- };
- // -------------------------- Flickity prototype -------------------------- //
- utils.extend( Flickity.defaults, {
- prevNextButtons: true,
- arrowShape: {
- x0: 10,
- x1: 60, y1: 50,
- x2: 70, y2: 40,
- x3: 30
- }
- });
- Flickity.createMethods.push('_createPrevNextButtons');
- var proto = Flickity.prototype;
- proto._createPrevNextButtons = function() {
- if ( !this.options.prevNextButtons ) {
- return;
- }
- this.prevButton = new PrevNextButton( -1, this );
- this.nextButton = new PrevNextButton( 1, this );
- this.on( 'activate', this.activatePrevNextButtons );
- };
- proto.activatePrevNextButtons = function() {
- this.prevButton.activate();
- this.nextButton.activate();
- this.on( 'deactivate', this.deactivatePrevNextButtons );
- };
- proto.deactivatePrevNextButtons = function() {
- this.prevButton.deactivate();
- this.nextButton.deactivate();
- this.off( 'deactivate', this.deactivatePrevNextButtons );
- };
- // -------------------------- -------------------------- //
- Flickity.PrevNextButton = PrevNextButton;
- return Flickity;
- }));
|