212 lines
5.7 KiB
JavaScript
212 lines
5.7 KiB
JavaScript
// 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;
|
|
|
|
}));
|