diff options
| author | David DeSandro <desandrocodes@gmail.com> | 2016-06-15 11:35:15 -0400 |
|---|---|---|
| committer | David DeSandro <desandrocodes@gmail.com> | 2016-06-15 11:35:15 -0400 |
| commit | 52b7d67887dbb340a27dc8b4587f5e7487876ecc (patch) | |
| tree | d4df6ad99db178afbbdb089539663b657a463626 | |
| parent | bfc99b18708bede60f4fc78cd94cf75fb5407fa8 (diff) | |
| download | flickity-52b7d67887dbb340a27dc8b4587f5e7487876ecc.zip flickity-52b7d67887dbb340a27dc8b4587f5e7487876ecc.tar.gz flickity-52b7d67887dbb340a27dc8b4587f5e7487876ecc.tar.bz2 | |
✅ groupCells tests
| -rw-r--r-- | sandbox/slides.html | 7 | ||||
| -rw-r--r-- | test/index.html | 25 | ||||
| -rw-r--r-- | test/test.css | 9 | ||||
| -rw-r--r-- | test/unit/group-cells.js | 39 |
4 files changed, 80 insertions, 0 deletions
diff --git a/sandbox/slides.html b/sandbox/slides.html index 902b0d4..baf9b36 100644 --- a/sandbox/slides.html +++ b/sandbox/slides.html @@ -38,6 +38,13 @@ html { overflow-y: scroll; } .carousel__cell.is-selected { background: #68F; } + +@media (min-width: 1000px) { + /* fit four */ + .carousel__cell { width: 23.5%; } + .carousel__cell--width2 { width: 49%; } + .carousel__cell--width3 { width: 74.5%; } +} </style> </head> diff --git a/test/index.html b/test/index.html index e357a14..ae720ea 100644 --- a/test/index.html +++ b/test/index.html @@ -55,6 +55,7 @@ <script src="unit/add-remove-cells.js"></script> <script src="unit/destroy.js"></script> <script src="unit/lazyload.js"></script> + <script src="unit/group-cells.js"></script> </head> <body> @@ -213,5 +214,29 @@ <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div> </div> + <h2>groupCells</h2> + <div id="group-cells" class="gallery"> + <div class="cell"></div> + <div class="cell cell--width2"></div> + <div class="cell"></div> + + <div class="cell cell--width3"></div> + <div class="cell"></div> + + <div class="cell cell--width2"></div> + <div class="cell cell--width2"></div> + + <div class="cell cell--width2"></div> + + <div class="cell cell--width4"></div> + + <div class="cell"></div> + <div class="cell"></div> + <div class="cell cell--width2"></div> + + <div class="cell"></div> + <div class="cell"></div> + </div> + </body> </html> diff --git a/test/test.css b/test/test.css index 4759fcf..5d26021 100644 --- a/test/test.css +++ b/test/test.css @@ -37,3 +37,12 @@ body { display: block; max-height: 100px; } + +#group-cells .cell { width: 100px; } +#group-cells .cell--width2 { width: 200px; } +#group-cells .cell--width3 { width: 300px; } +#group-cells .cell--width4 { width: 400px; } + +#group-cells.is-expanded { width: 600px; } + +#group-cells .cell:nth-child(2n) { background: #09F; } diff --git a/test/unit/group-cells.js b/test/unit/group-cells.js new file mode 100644 index 0000000..9cd2667 --- /dev/null +++ b/test/unit/group-cells.js @@ -0,0 +1,39 @@ +test( 'groupCells', function( assert ) { + 'use strict'; + + var flkty = new Flickity( '#group-cells', { + groupCells: true + }); + + function getSlideCellsCount() { + var counts = flkty.slides.map( function( slide ) { + return slide.cells.length; + }); + return counts.join(','); + }; + + assert.equal( getSlideCellsCount(), '3,2,2,1,1,3,2', 'groupCells: true' ); + var targets = flkty.slides.map( function( slide ) { + return slide.target + }); + assert.deepEqual( targets, [200, 600, 1000, 1300, 1600, 2000, 2300], 'targets' ); + + flkty.selectCell( 6 ); + assert.equal( flkty.selectedIndex, 2, 'selectCell(6) selects 3rd slide' ); + flkty.selectCell( flkty.cells[2].element ); + assert.equal( flkty.selectedIndex, 0, 'selectCell(3rd elem) selects 1st slide' ); + + flkty.options.groupCells = 2; + flkty.reposition(); + assert.equal( getSlideCellsCount(), '2,2,2,2,2,2,2', 'groupCells: 2' ); + + flkty.options.groupCells = '75%'; + flkty.reposition(); + assert.equal( getSlideCellsCount(), '2,1,1,2,1,1,1,2,2,1', 'groupCells: 75%' ); + + flkty.element.classList.add('is-expanded'); // 600px wide + flkty.options.groupCells = true; + flkty.resize(); + assert.equal( getSlideCellsCount(), '3,3,2,3,3', 'groupCells: true, container @ 600px' ); + +}); |