Skip to content

A patch to intergrate Flickity with React #381

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

A patch to intergrate Flickity with React #381

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1003576
noDomMod option added
oxpa May 19, 2016
c1e2f9f
should I reset shif cells inside realoadCells?
oxpa May 19, 2016
044f6a3
allow multiple Flickity instances to look for a slider inside bind in…
oxpa May 20, 2016
ae3513a
Merge remote-tracking branch 'upstream/master'
oxpa Jul 27, 2016
1a1960a
fixed a typo
oxpa Jul 27, 2016
170ff65
removed anneeded actions appeared on merge
oxpa Jul 27, 2016
65d63a8
removed obsolete function call
oxpa Jul 27, 2016
f9810a9
Revert "removed anneeded actions appeared on merge"
oxpa Aug 2, 2016
374ea36
Merge branch 'master' of github.com:oxpa/flickity
oxpa Aug 2, 2016
7d7bda4
Merge remote branch 'upstream/master'
oxpa Feb 7, 2018
b5eb8cb
minor changes to make lint happy
oxpa Feb 7, 2018
e8af7b7
Merge remote-tracking branch 'original/master'
mrehse May 1, 2018
b48bd0d
Updated to allow NoDomMod on Page Dots
mrehse May 1, 2018
190fed9
Merge pull request #1 from mrehse/master
oxpa May 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 30 additions & 12 deletions js/flickity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,8 @@ Flickity.defaults = {
selectedAttraction: 0.025,
setGallerySize: true
// watchCSS: false,
// wrapAround: false
// wrapAround: false,
// noDomMod: false
};

// hash of methods triggered on _create()
Expand All @@ -129,8 +130,16 @@ Flickity.prototype._create = function() {
this.accel = 0;
this.originSide = this.options.rightToLeft ? 'right' : 'left';
// create viewport & slider
this.viewport = document.createElement('div');
this.viewport.className = 'flickity-viewport';
if (this.options.noDomMod) {
this.viewport = document.querySelector('.flickity-viewport');
Copy link

@PaoloFalomo PaoloFalomo May 19, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@oxpa
is this working with multiple flickity sliders too?
querySelector() references only to the first element found with that selection but if there're more '.flickity-viewport' (eg. with more than 1 slider) it will take just the first found discarding others.

I'm just mind-debugging and i think that could ✅ work if you run the querySelector() in an inner element instead of looking throw all the document.

Copy link
Author

@oxpa oxpa May 19, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm... You are right: I didn't keep in mind, there might be several instances. I'll have this changed in awhile

if ( !this.viewport && console ) {
console.error( 'Could not find ".flickity-viewport"' );
return
}
} else {
this.viewport = document.createElement('div');
this.viewport.className = 'flickity-viewport';
}
Flickity.setUnselectable( this.viewport );
this._createSlider();

Expand Down Expand Up @@ -173,9 +182,11 @@ Flickity.prototype.activate = function() {
this.getSize();
// move initial cell elements so they can be loaded as cells
var cellElems = this._filterFindCellElements( this.element.children );
moveElements( cellElems, this.slider );
this.viewport.appendChild( this.slider );
this.element.appendChild( this.viewport );
if (! this.options.noDomMod) {
moveElements( cellElems, this.slider );
this.viewport.appendChild( this.slider );
this.element.appendChild( this.viewport );
}
// get cells from children
this.reloadCells();

Expand Down Expand Up @@ -206,10 +217,17 @@ Flickity.prototype.activate = function() {
// slider positions the cells
Flickity.prototype._createSlider = function() {
// slider element does all the positioning
var slider = document.createElement('div');
slider.className = 'flickity-slider';
slider.style[ this.originSide ] = 0;
this.slider = slider;
if (this.options.noDomMod) {
this.slider = document.querySelector('.flickity-slider');
if ( !this.slider && console ) {
console.error( 'Could not find ".flickity-slider"' );
return
}
} else {
this.slider = document.createElement('div');
this.slider.className = 'flickity-slider';
}
this.slider.style[ this.originSide ] = 0;
};

Flickity.prototype._filterFindCellElements = function( elems ) {
Expand Down Expand Up @@ -695,9 +713,9 @@ Flickity.prototype.deactivate = function() {
cell.destroy();
}
this._removeSelectedCellClass();
this.element.removeChild( this.viewport );
this.options.noDomMod || this.element.removeChild( this.viewport );
// move child elements back into element
moveElements( this.slider.children, this.element );
this.options.noDomMod || moveElements( this.slider.children, this.element );
if ( this.options.accessibility ) {
this.element.removeAttribute('tabIndex');
eventie.unbind( this.element, 'keydown', this );
Expand Down