<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>add/remove cells</title>
<link rel="stylesheet" href="../css/flickity.css" />
<link rel="stylesheet" href="sandbox.css" />
<style>
.cell {
position: relative;
}
.remove-button {
font-size: 20px;
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<h1>add/remove cells</h1>
<div id="demo1" class="demo">
<div class="container variable-width js-flickity">
<div class="cell n1 w3"><b>1</b><button class="remove-button">×</button></div>
<div class="cell n2"><b>2</b><button class="remove-button">×</button></div>
<div class="cell n3 w3"><b>3</b><button class="remove-button">×</button></div>
<div class="cell n4"><b>4</b><button class="remove-button">×</button></div>
<div class="cell n5 w2"><b>5</b><button class="remove-button">×</button></div>
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
</div>
<p>
<button class="prepend-button">Prepend</button>
<button class="insert-button">Insert</button>
<button class="append-button">Append</button>
</p>
</div>
<h2>freeScroll</h2>
<div id="demo2" class="demo">
<div class="container variable-width js-flickity"
data-flickity-options='{ "freeScroll": true }'>
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
</div>
<p>
<button class="prepend-button">Prepend</button>
<button class="insert-button">Insert</button>
<button class="append-button">Append</button>
</p>
</div>
<h2>wrapAround</h2>
<div id="demo3" class="demo">
<div class="container variable-width js-flickity"
data-flickity-options='{ "wrapAround": true }'>
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
</div>
<p>
<button class="prepend-button">Prepend</button>
<button class="insert-button">Insert</button>
<button class="append-button">Append</button>
</p>
</div>
<h2>wrapAround, freeScroll</h2>
<div id="demo4" class="demo">
<div class="container variable-width js-flickity"
data-flickity-options='{ "wrapAround": true, "freeScroll": true }'>
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
</div>
<p>
<button class="prepend-button">Prepend</button>
<button class="insert-button">Insert</button>
<button class="append-button">Append</button>
</p>
</div>
<h2>contain</h2>
<div id="demo5" class="demo">
<div class="container variable-width js-flickity"
data-flickity-options='{ "contain": true }'>
<div class="cell n1 w3"><b>1</b><button class="remove-button">×</button></div>
<div class="cell n2"><b>2</b><button class="remove-button">×</button></div>
<div class="cell n3 w3"><b>3</b><button class="remove-button">×</button></div>
<div class="cell n4"><b>4</b><button class="remove-button">×</button></div>
<div class="cell n5 w2"><b>5</b><button class="remove-button">×</button></div>
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
</div>
<p>
<button class="prepend-button">Prepend</button>
<button class="insert-button">Insert</button>
<button class="append-button">Append</button>
</p>
</div>
<h2>reposition</h2>
<div id="reposition">
<div class="container variable-width">
<div class="cell w2"><b>1</b></div>
<div class="cell"><b>2</b></div>
<div class="cell w3"><b>3</b></div>
<div class="cell"><b>4</b></div>
<div class="cell"><b>5</b></div>
<div class="cell w2"><b>6</b></div>
<div class="cell"><b>7</b></div>
<div class="cell w2"><b>8</b></div>
<div class="cell"><b>9</b></div>
</div>
</div>
<h2>prepend with single #492</h2>
<div id="prepend-single">
<div class="container variable-width">
<div class="cell n1"><b>1</b><button class="remove-button">×</button></div>
</div>
<p>
<button class="prepend-button">Prepend</button>
</p>
</div>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../bower_components/unidragger/unidragger.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../js/cell.js"></script>
<script src="../js/slide.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/flickity.js"></script>
<script src="../js/drag.js"></script>
<script src="../js/prev-next-button.js"></script>
<script src="../js/page-dots.js"></script>
<script src="../js/player.js"></script>
<script src="../js/add-remove-cell.js"></script>
<script>
var cellCount = 6;
function randInt( num ) {
return Math.floor( Math.random() * num );
}
function getRandom( ary ) {
var index = Math.floor( Math.random() * ary.length );
return ary[ index ];
}
var widthClasses = [ '', 'w2', 'w3' ];
var nClasses = 'n1 n2 n3 n4 n5 n6'.split(' ');
function makeCell() {
var cell = document.createElement('div');
cell.className = 'cell ' + getRandom( widthClasses ) + ' ' + getRandom( nClasses );
var b = document.createElement('b');
b.textContent = ++cellCount;
cell.appendChild( b );
var removeButton = document.createElement('button');
removeButton.className = 'remove-button';
removeButton.textContent = '×';
cell.appendChild( removeButton );
return cell;
}
function getParent( elem, selector ) {
while ( elem != document.body ) {
elem = elem.parentNode;
if ( matchesSelector( elem, selector ) ) {
return elem;
}
}
}
function onContainerClick( event ) {
if ( event.target.className != 'remove-button' ) {
return;
}
//
var cellElement = getParent( event.target, '.cell' );
var container = getParent( event.target, '.container' );
var flkty = Flickity.data( container );
flkty.remove( cellElement );
}
function getParentFlickity( elem ) {
var demo = getParent( elem, '.demo' );
return Flickity.data( demo.querySelector('.container') );
}
function onPrependClick( event ) {
var flkty = getParentFlickity( event.target );
flkty.prepend([ makeCell(), makeCell(), makeCell() ]);
}
function onInsertClick( event ) {
var flkty = getParentFlickity( event.target );
flkty.insert([ makeCell(), makeCell(), makeCell() ], 3 );
}
function onAppendClick( event ) {
var flkty = getParentFlickity( event.target );
flkty.append([ makeCell(), makeCell(), makeCell() ]);
}
// init
var demos = document.querySelectorAll('.demo');
for ( var i=0; i < demos.length; i++ ) {
var demo = demos[i];
demo.querySelector('.container').addEventListener( 'click', onContainerClick );
demo.querySelector('.prepend-button').addEventListener( 'click', onPrependClick );
demo.querySelector('.insert-button').addEventListener( 'click', onInsertClick );
demo.querySelector('.append-button').addEventListener( 'click', onAppendClick );
}
// ----- reposition ----- //
(function() {
var flkty = new Flickity('#reposition .container');
flkty.on( 'staticClick', function( event, pointer, cellElem ) {
cellElem.classList.toggle('w3');
flkty.reposition();
});
window.mapTargets = function() {
return flkty.slides.map( function( slide ) {
return ~~slide.target;
});
}
})();
// ----- prepend single, #492 ----- //
( function() {
var demo = document.querySelector('#prepend-single');
var flkty = new Flickity( demo.querySelector('.container') );
demo.querySelector('.prepend-button').onclick = function() {
flkty.prepend( makeCell() );
};
})();
</script>
</body>
</html>