123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
- <!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() ]);
- }
- 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 );
- }
- (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;
- });
- }
- })();
- ( 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>
|