https://github.com/WWBN/AVideo/issues/8137

node_modules/flickity/sandbox/js/add-remove.js

@@ -0,0 +1,74 @@
+let cellCount = 6;
+
+function getRandom( ary ) {
+  let index = Math.floor( Math.random() * ary.length );
+  return ary[ index ];
+}
+
+let widthClasses = [ '', 'w2', 'w3' ];
+let nClasses = 'n1 n2 n3 n4 n5 n6'.split(' ');
+
+function makeCell() {
+  let cell = document.createElement('div');
+  cell.className = `cell ${getRandom( widthClasses )} ${getRandom( nClasses )}`;
+  let b = document.createElement('b');
+  b.textContent = ++cellCount;
+  cell.appendChild( b );
+  let removeButton = document.createElement('button');
+  removeButton.className = 'remove-button';
+  removeButton.textContent = '×';
+  cell.appendChild( removeButton );
+  return cell;
+}
+
+function makeCells() {
+  return [ makeCell(), makeCell(), makeCell() ];
+}
+
+// init
+[ ...document.querySelectorAll('.demo') ].forEach( ( demo ) => {
+  let container = demo.querySelector('.container');
+  let flkty = Flickity.data( container );
+
+  demo.querySelector('.container').addEventListener( 'click', function( event ) {
+    if ( event.target.matches('.remove-button') ) return;
+
+    let cellElement = event.target.closest('.cell');
+    flkty.remove( cellElement );
+  } );
+
+  demo.querySelector('.prepend-button').addEventListener( 'click', function() {
+    flkty.prepend( makeCells() );
+  } );
+
+  demo.querySelector('.insert-button').addEventListener( 'click', function() {
+    flkty.insert( makeCells(), 3 );
+  } );
+
+  demo.querySelector('.append-button').addEventListener( 'click', function() {
+    flkty.append( makeCells() );
+  } );
+
+} );
+
+// ----- reposition ----- //
+
+( function() {
+  let flkty = new Flickity('#reposition .container');
+  flkty.on( 'staticClick', function( event, pointer, cellElem ) {
+    if ( !cellElem ) return;
+
+    cellElem.classList.toggle('w3');
+    flkty.reposition();
+  } );
+} )();
+
+// ----- prepend single, #492 ----- //
+
+( function() {
+  let demo = document.querySelector('#prepend-single');
+  let flkty = new Flickity( demo.querySelector('.container') );
+  demo.querySelector('.prepend-button').addEventListener( 'click', function() {
+    flkty.prepend( makeCell() );
+  } );
+} )();

node_modules/flickity/sandbox/js/basic.js

@@ -0,0 +1,27 @@
+let flky = window.flky = new Flickity('#full-width');
+
+// flky.on( 'dragMove', function( event, pointer ) {
+//   console.log( event.type, pointer.pageX, pointer.pageY );
+// });
+flky.on( 'select', function() {
+  console.log( 'selected', flky.selectedIndex );
+} );
+
+flky.on( 'settle', function() {
+  console.log( 'settled', flky.x );
+} );
+
+let halfWidthflky = new Flickity( '#half-width', {
+  cellAlign: 'left',
+} );
+
+halfWidthflky.on( 'staticClick', function( event, pointer, cellIndex, cellElement ) {
+  console.log( cellIndex, cellElement );
+} );
+
+new Flickity( '#gallery3', {
+} );
+
+document.querySelector('#gallery3 button').onclick = function() {
+  console.log('button click');
+};

node_modules/flickity/sandbox/js/jquery.js

@@ -0,0 +1,24 @@
+/* globals $ */
+
+let $gallery1 = $('#gallery1').flickity();
+let flkty = $gallery1.data('flickity');
+
+// $gallery1.on( 'dragMove', function( event, pointer ) {
+//   console.log( event.type, pointer.pageX, pointer.pageY );
+// });
+
+$gallery1.on( 'cellSelect.flickity', function( event ) {
+  console.log( 'selected', event.type, `ns:${event.namespace}`, flkty.selectedIndex );
+} );
+
+$gallery1.on( 'settle.flickity', function( event ) {
+  console.log( 'settled', flkty.x, event.type );
+} );
+
+$gallery1.on( 'staticClick.flickity', function( event, pointer, cellElem, cellIndex ) {
+  console.log( 'staticClick', event.type, cellIndex );
+} );
+
+$('#gallery2').flickity({
+  wrapAround: true,
+});

node_modules/flickity/sandbox/js/scroll-event.js

@@ -0,0 +1,56 @@
+let flkty = new Flickity( '.carousel1', {
+  initialIndex: 2,
+  // groupCells: true,
+  // wrapAround: true,
+  // cellAlign: 'right'
+} );
+
+let progressBar = document.querySelector('.progress-bar');
+
+flkty.on( 'scroll', function( progress ) {
+  console.log( progress );
+  let width = Math.max( 0, Math.min( 1, progress ) );
+  progressBar.style.width = width * 100 + '%';
+} );
+
+flkty.reposition();
+
+// -----  ----- //
+
+let paraBG = document.querySelector('.parallax__layer--bg');
+let paraFG = document.querySelector('.parallax__layer--fg');
+
+let paraFlkty = new Flickity( '.parallax__carousel', {
+
+} );
+
+let cellRatio = 0.6;
+let bgRatio = 0.8;
+let fgRatio = 1.25;
+
+paraFlkty.on( 'scroll', function( progress ) {
+  // console.log( progress );
+  paraBG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * bgRatio ) * 100 + '%';
+  paraFG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * fgRatio ) * 100 + '%';
+} );
+
+paraFlkty.reposition();
+
+// -----  ----- //
+
+let imgFlkty = new Flickity( '.image-carousel', {
+} );
+
+window.onload = function() {
+  imgFlkty.reposition();
+};
+
+let imgs = document.querySelectorAll('.image-carousel img');
+
+imgFlkty.on( 'scroll', function() {
+  imgFlkty.slides.forEach( ( slide, i ) => {
+    let img = imgs[i];
+    let x = ( slide.target + imgFlkty.x ) * -0.333;
+    img.style.transform = `translateX(${x}px)`;
+  } );
+} );

node_modules/flickity/sandbox/js/tricky-drag.js

@@ -0,0 +1,34 @@
+let nonDragFlkty = new Flickity( '.carousel--non-drag', {
+  draggable: false,
+} );
+
+function onStaticClick( event, pointer, cellElem, cellIndex ) {
+  console.log( 'staticClick', this.element.className, cellIndex );
+}
+
+nonDragFlkty.on( 'staticClick', onStaticClick );
+
+let singleCellFlkty = new Flickity('.carousel--single-cell');
+singleCellFlkty.on( 'staticClick', onStaticClick );
+
+let groupFlkty = new Flickity( '.carousel--group', {
+  groupCells: true,
+} );
+
+groupFlkty.on( 'staticClick', function( event ) {
+  let cellElem = event.target.closest('.carousel-cell');
+  if ( cellElem ) groupFlkty.remove( cellElem );
+} );
+
+function makeGroupCell() {
+  let cell = document.createElement('div');
+  cell.className = 'carousel-cell';
+  let b = document.createElement('b');
+  b.textContent = groupFlkty.cells.length + 1;
+  cell.appendChild( b );
+  return cell;
+}
+
+document.querySelector('.add-group-cell-button').onclick = function() {
+  groupFlkty.append( makeGroupCell() );
+};

node_modules/flickity/sandbox/js/v2-sizzle.js

@@ -0,0 +1,16 @@
+let flkty = new Flickity( '.carousel', {
+  groupCells: true,
+  adaptiveHeight: true,
+  wrapAround: true,
+} );
+
+let paraBg = document.querySelector('.parallax-layer--bg');
+let paraFg = document.querySelector('.parallax-layer--fg');
+let count = flkty.slides.length - 1;
+
+flkty.on( 'scroll', function( progress ) {
+  paraBg.style.left = ( 0.5 - ( 0.5 + progress * count ) * 0.7 ) * ( 37/36 ) * 100 + '%';
+  paraFg.style.left = ( 0.5 - ( 0.5 + progress * count ) * 1.5 ) * ( 37/36 ) * 100 + '%';
+} );
+
+flkty.reposition();

node_modules/flickity/sandbox/js/wrap-around.js

@@ -0,0 +1,20 @@
+window.flkty = new Flickity( '#gallery1', {
+  wrapAround: true,
+} );
+
+window.flkty2 = new Flickity( '#gallery2', {
+} );
+
+window.flkty6 = new Flickity( '#gallery6', {
+  wrapAround: true,
+  cellAlign: 'left',
+} );
+
+window.flkty4 = new Flickity( '#gallery4', {
+  wrapAround: true,
+  freeScroll: true,
+} );
+
+window.flky5 = new Flickity( '#gallery5', {
+  freeScroll: true,
+} );