275 lines
9.1 KiB
HTML
275 lines
9.1 KiB
HTML
<!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>
|