timbles - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

package.json

 {
   "name": "timbles",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "a p chill jQuery table plugin, made by people who literally did not invent tables",
@@ -5,0 +5,0 @@ "main": "timbles",

readme.md

@@ -267,2 +267,3 @@ timbles.js
 ## Changelog
+* 1.1.4 prepare to plug in (a refactor for future features)
 * 1.1.3 pagination refactor, testing refactor, so much faster!
@@ -269,0 +270,0 @@ * 1.1.2 critical json sorting bug, major test refactoring

tests/data.json

@@ -8,3 +8,4 @@ [
     "percentage": 1,
-    "pets": "Gold fish"
+    "pets": "Gold fish",
+    "sparse": "One"
   },
@@ -17,3 +18,4 @@ {
     "percentage": 0.05,
-    "pets": "Crickets"
+    "pets": "Crickets",
+    "sparse": "One"
   },
@@ -26,3 +28,4 @@ {
     "percentage": 0,
-    "pets": "Rabbit"
+    "pets": "Rabbit",
+    "sparse": ""
   },
@@ -35,3 +38,4 @@ {
     "percentage": 0.4545,
-    "pets": "Dog"
+    "pets": "Dog",
+    "sparse": ""
   },
@@ -44,4 +48,5 @@ {
     "percentage": -1,
-    "pets": "Cat"
+    "pets": "Cat",
+    "sparse": "Two"
   }
 ]

tests/test-scripts/pagination.js

@@ -62,2 +62,10 @@ /* Testing pagination of timbles tables */
 
+QUnit.test( 'Correct button (dis|en)able state on first page', function( assert ) {
+  var navigationButtons = target.next().find( '.nav-arrows button' );
+  assert.ok( navigationButtons.eq( 0 ).attr( 'disabled' ), 'First button disabled' );
+  assert.ok( navigationButtons.eq( 1 ).attr( 'disabled' ), 'Previous button disabled' );
+  assert.notOk( navigationButtons.eq( 2 ).attr( 'disabled' ), 'Next button enabled' );
+  assert.notOk( navigationButtons.eq( 3 ).attr( 'disabled' ), 'Last button enabled' );
+} );
+
 /* Tests of navigation and related behavior
@@ -92,3 +100,3 @@ *
 
-QUnit.test( 'Go to page by using goToPage method', function( assert ) {
+QUnit.test( 'Go to last page by using goToPage method', function( assert ) {
   var paginationData = target.data( 'timbles' ).pagination;
@@ -108,2 +116,10 @@ var pageNumber = target.next().find( '.pointer-this-page' );
 
+QUnit.test( 'Correct button (dis|en)able state on last page', function( assert ) {
+  var navigationButtons = target.next().find( '.nav-arrows button' );
+  assert.notOk( navigationButtons.eq( 0 ).attr( 'disabled' ), 'First button enabled' );
+  assert.notOk( navigationButtons.eq( 1 ).attr( 'disabled' ), 'Previous button enabled' );
+  assert.ok( navigationButtons.eq( 2 ).attr( 'disabled' ), 'Next button disabled' );
+  assert.ok( navigationButtons.eq( 3 ).attr( 'disabled' ), 'Last button disabled' );
+} );
+
 QUnit.test( 'Sorting resets to first page', function( assert ) {
@@ -110,0 +126,0 @@ target.timbles( 'sortColumn', 0, 'desc' );

tests/test-scripts/sorting.js

@@ -29,10 +29,10 @@ /* Test sorting of timblified tables */
 
-QUnit.test( 'Detect single header row', function( assert ) {
-  var numRows = target.find( 'tr.header-row' ).length;
-  assert.equal( numRows, 1 );
+QUnit.test( 'Count number of sort-enabled header cells', function( assert ) {
+  var sortHeaders = target.find( 'th.timbles-sort-header' ).length;
+  assert.equal( sortHeaders, 6 );
 } );
 
-QUnit.test( 'Correct number of non-header record rows', function( assert ) {
-  var numRows = target.find( 'tr' ).not( '.header-row' ).length;
-  assert.equal( numRows, Math.min( tablePageSize(), 5 ) );
+QUnit.test( 'Correct number of rows in the table body', function( assert ) {
+  var bodyRows = target.find( 'tbody tr' ).length;
+  assert.equal( bodyRows, Math.min( tablePageSize(), 5 ) );
 } );
@@ -150,1 +150,21 @@
 } );
+
+QUnit.test( 'Sorting unsortable column does nothing', function( assert ) {
+  assert.deepEqual(
+      sortedColumnContent( 5, 'asc' ),
+      sortedColumnContent( 5, 'desc' ),
+      'Ascending/descending sorted content is the same' );
+} );
+
+QUnit.test( 'Sorting sparsely filled columns', function( assert ) {
+  var expected = [ '', '', 'One', 'One', 'Two' ];
+  assert.deepEqual(
+      sortedColumnContent( 6 ),
+      sliceForPagination( expected ),
+      'Ascending order' );
+  expected.reverse();
+  assert.deepEqual(
+      sortedColumnContent( 6, 'desc' ),
+      sliceForPagination( expected ),
+      'Descending order' );
+} );

timbles.js

@@ -16,18 +16,16 @@ /**
 
-var defaults = {
-  sortKey: null,
-  sortOrder: null
-};
-
 var classes = {
   disabled: 'disabled',
   active: 'active',
-  headerRow: 'header-row',
-  label: 'label',
+  sortHeader: 'timbles-sort-header',
   sortASC: 'sorted-asc',
   sortDESC: 'sorted-desc',
   noSort: 'no-sort',
+  navigationCurrentPage: 'pointer-this-page',
+  navigationLastPage: 'pointer-last-page',
   paginationToolsContainer: 'pagination',
   paginationNavArrows: 'nav-arrows',
-  paginationNavRowCountChoice: 'row-count-choice'
+  paginationNavRowCountChoice: 'row-count-choice',
+  paginationNavigationButton: null,
+  paginationRowCountButton: null
 };
@@ -48,18 +46,17 @@
   init: function( opts ) {
-    return this.each( function() {
-      var $this = $( this ).addClass( pluginName );
-      var options = $.extend( {}, defaults, opts );
-      var data = {
-        dataConfig: methods.parseDataConfig( options.dataConfig ),
-        sorting: options.sorting,
-        pagination: options.pagination
-      };
-      $this.data( pluginName, data );
+    var options = $.extend( {}, opts );
+    var data = {
+      classes: $.extend( {}, classes, options.classes ),
+      copy: $.extend( {}, copy, options.copy ),
+      dataConfig: methods.parseDataConfig( options.dataConfig ),
+      sorting: options.sorting,
+      pagination: options.pagination
+    };
+    this.data( pluginName, data ).addClass( pluginName );
 
-      if ( data.dataConfig ) {
-        methods.generateTableFromJson.call( $this );
-      } else {
-        methods.setupExistingTable.call( $this );
-      }
-    } );
+    if ( data.dataConfig ) {
+      methods.generateTableFromJson.call( this );
+    } else {
+      methods.configureTable.call( this );
+    }
   },
@@ -93,14 +90,29 @@
 
-  setupExistingTable: function() {
+  configureTable: function() {
     var data = this.data( pluginName );
+    data.$headers = methods.selectColumnHeaders.call( this );
+    data.tableRows = methods.selectTableBody.call( this );
 
-    // For each header cell, store its column number
-    var $headerRow = data.$headerRow = this.find( 'thead tr' ).eq( 0 )
-      .addClass( classes.headerRow );
-    $headerRow.find( 'th' ).each( function( index ) {
-      $( this ).data( 'timbles-column-index', index );
+    // Start enabling any given features
+    if ( data.sorting ) {
+      methods.enableSorting.call( this );
+
+      if ( data.sorting.keyId ) {
+        methods.sortColumn.call( this, data.sorting.keyId, data.sorting.order );
+      }
+    }
+
+    if ( data.pagination ) {
+      methods.enablePagination.call( this, data.pagination.recordsPerPage );
+    }
+  },
+
+  selectColumnHeaders: function() {
+    return this.find( 'thead th' ).each( function( index, cell ) {
+      $( cell ).data( 'timbles-column-index', index );
     } );
+  },
 
-    // Start enabling any given features
-    methods.enableFeaturesSetup.call( this );
+  selectTableBody: function() {
+    return this.find( 'tbody tr' ).get();
   },
@@ -110,12 +122,10 @@
     var data = this.data( pluginName );
-    var $headerRow = data.$headerRow = $( '<tr>' )
-      .addClass( classes.headerRow )
-      .appendTo( $( '<thead>' ).appendTo( this ) );
+    var generateRows = methods.generateRowsFromData.bind( this, data.dataConfig.columns );
+    var $headerRow = $( '<tr>' ).appendTo( $( '<thead>' ).appendTo( this ) );
 
-    // Generate and add cell headers to header row
+    // Generate header cells and create jQuery object from them
     $.each( data.dataConfig.columns, function( index, value ) {
       $( '<th>' )
         .attr( 'id', value.id )
-        .addClass( value.noSorting ? classes.noSort : null )
-        .data( 'timbles-column-index', index )
+        .addClass( value.noSorting ? data.classes.noSort : null )
         .text( value.label )
@@ -125,23 +135,13 @@ .appendTo( $headerRow );
 
+    // Fill table with provided or linked (JSON) data, then configure it
     if ( $.isArray( data.dataConfig.data ) ) {
-
-      // No need for ajax call if data is local array
-      methods.generateRowsFromData.call( this, data.dataConfig.data, data.dataConfig.columns );
-
-      // Start enabling any given features
-      methods.enableFeaturesSetup.call( this );
+      generateRows( data.dataConfig.data );
+      methods.configureTable.call( this );
     } else {
-
-      // Get external json file given
-      $.getJSON( data.dataConfig.data, function( json ) {
-        methods.generateRowsFromData.call( this, json, data.dataConfig.columns );
-      }.bind( this ) ).then( function() {
-
-        // Start enabling any given features
-        methods.enableFeaturesSetup.call( this );
-      }.bind( this ) );
+      $.getJSON( data.dataConfig.data, generateRows )
+        .then( methods.configureTable.bind( this ) );
     }
   },
 
-  generateRowsFromData: function( rowData, columnConfig ) {
+  generateRowsFromData: function( columnConfig, rowData ) {
     $.each( rowData, function( index, row ) {
@@ -163,24 +163,9 @@
 
-  enableFeaturesSetup: function() {
+  enableSorting: function() {
     var data = this.data( pluginName );
-    data.tableRows = this.find( 'tbody tr' ).get();
-
-    if ( data.sorting ) {
-      methods.enableSorting.call( this );
-
-      if ( data.sorting.keyId ) {
-        methods.sortColumn.call( this, data.sorting.keyId, data.sorting.order );
-      }
-    }
-
-    if ( data.pagination ) {
-      methods.enablePagination.call( this, data.pagination.recordsPerPage );
-    }
+    data.$headers.not( '.' + data.classes.noSort )
+      .addClass( data.classes.sortHeader )
+      .on( 'click', methods.sortColumnEvent.bind( this ) );
   },
 
-  enableSorting: function() {
-    this.find( 'th' ).not( '.no-sort' ).on(
-      'click', methods.sortColumnEvent.bind( this ) );
-  },
-
   sortColumn: function( key, order ) {
@@ -193,3 +178,3 @@
       var data = this.data( pluginName );
-      data.$headerRow.find( 'th' ).eq( key ).trigger( 'click', order );
+      data.$headers.eq( key ).trigger( 'click', order );
     } else {
@@ -208,8 +193,8 @@ this.find( '#' + key ).trigger( 'click', order );
     if ( !order ) {
-      order = $sortHeader.hasClass( classes.sortASC ) ? 'desc' : 'asc';
+      order = $sortHeader.hasClass( data.classes.sortASC ) ? 'desc' : 'asc';
     }
-    data.$headerRow.find( 'th' )
-      .removeClass( classes.sortASC )
-      .removeClass( classes.sortDESC );
-    $sortHeader.addClass( ( order === 'asc' ) ? classes.sortASC : classes.sortDESC );
+    data.$headers
+      .removeClass( data.classes.sortASC )
+      .removeClass( data.classes.sortDESC );
+    $sortHeader.addClass( ( order === 'asc' ) ? data.classes.sortASC : data.classes.sortDESC );
 
@@ -221,3 +206,3 @@ // Determine column values to actually sort by
       if ( dataValue === null ) {
-        dataValue = cell.textContent || cell.innerText;
+        dataValue = cell.textContent || cell.innerText || '';
       } else if ( parseFloat( dataValue ).toString() === dataValue ) {
@@ -291,3 +276,3 @@ dataValue = parseFloat( dataValue );
     data.$paginationToolsContainer = $( '<div>' )
-      .addClass( classes.paginationToolsContainer )
+      .addClass( data.classes.paginationToolsContainer )
       .insertAfter( this );
@@ -316,18 +301,27 @@
     var data = this.data( pluginName );
+    var $navButton = $( '<button>' )
+      .attr( 'type', 'button' )
+      .toggleClass(
+        data.classes.paginationNavigationButton,
+        data.classes.paginationNavigationButton );
 
-    data.$linkFirstPage = $( '<button role="button">' ).text( copy.firstPageArrow );
-    data.$linkPrevPage = $( '<button role="button">' ).text( copy.prevPageArrow );
-    data.$linkNextPage = $( '<button role="button">' ).text( copy.nextPageArrow );
-    data.$linkLastPage = $( '<button role="button">' ).text( copy.lastPageArrow );
+    data.$linkFirstPage = $navButton.clone().text( data.copy.firstPageArrow );
+    data.$linkPrevPage = $navButton.clone().text( data.copy.prevPageArrow );
+    data.$linkNextPage = $navButton.clone().text( data.copy.nextPageArrow );
+    data.$linkLastPage = $navButton.clone().text( data.copy.lastPageArrow );
+    data.$pointerThisPage = $( '<span>' )
+        .addClass( classes.navigationCurrentPage )
+        .text( data.pagination.currentPage );
+    data.$pointerLastPage = $( '<span>' )
+        .addClass( classes.navigationLastPage )
+        .text( data.pagination.lastPage );
     var $pageNumberTracker = $( '<span>' )
       .addClass( 'page-number-tracker' )
-      .text( copy.page + ' ' )
-      .append( $( '<span>' ).addClass( 'pointer-this-page' ).text( data.pagination.currentPage ) )
-      .append( ' ' + copy.of + ' ' )
-      .append( $( '<span>' ).addClass( 'pointer-last-page' ).text( data.pagination.lastPage ) );
+      .text( data.copy.page + ' ' )
+      .append( data.$pointerThisPage )
+      .append( ' ' + data.copy.of + ' ' )
+      .append( data.$pointerLastPage );
 
-    data.$pointerThisPage = $pageNumberTracker.find( '.pointer-this-page' );
-    data.$pointerLastPage = $pageNumberTracker.find( '.pointer-last-page' );
     $( '<div>' )
-      .addClass( classes.paginationNavArrows )
+      .addClass( data.classes.paginationNavArrows )
       .append( data.$linkFirstPage )
@@ -341,7 +335,7 @@ .append( data.$linkPrevPage )
     // Register event listeners
-    data.$linkFirstPage.click( function() {
+    data.$linkFirstPage.on( 'click', function() {
       methods.goToPage.call( this, 1 );
     }.bind( this ) );
 
-    data.$linkPrevPage.click( function() {
+    data.$linkPrevPage.on( 'click', function() {
       if ( data.pagination.currentPage > 1 ) {
@@ -352,3 +346,3 @@ methods.goToPage.call( this, data.pagination.currentPage - 1 );
 
-    data.$linkNextPage.click( function() {
+    data.$linkNextPage.on( 'click', function() {
       if ( data.pagination.currentPage < data.pagination.lastPage ) {
@@ -359,3 +353,3 @@ methods.goToPage.call( this, data.pagination.currentPage + 1 );
 
-    data.$linkLastPage.click( function() {
+    data.$linkLastPage.on( 'click', function() {
       methods.goToPage.call( this, data.pagination.lastPage );
@@ -370,8 +364,8 @@ }.bind( this ) );
     pageSizeSelection = $( '<div>' )
-      .addClass( classes.paginationNavRowCountChoice )
+      .addClass( data.classes.paginationNavRowCountChoice )
       .appendTo( data.$paginationToolsContainer );
 
     pageSizeChangeEvent = function( event ) {
-      var $target = $( event.target ).addClass( classes.active );
-      $target.siblings().removeClass( classes.active );
+      var $target = $( event.target ).addClass( data.classes.active );
+      $target.siblings().removeClass( data.classes.active );
       var pageSize = $target.text();
@@ -383,3 +377,3 @@
 
-      methods.enablePagination.call( this, parseInt( pageSize ) );
+      methods.enablePagination.call( this, parseInt( pageSize, 10 ) );
     }.bind( this );
@@ -389,5 +383,9 @@
       $( '<button>' )
-        .attr( 'role', 'button' )
+        .attr( 'type', 'button' )
+        .on( 'click', pageSizeChangeEvent )
         .text( this )
-        .on( 'click', pageSizeChangeEvent )
+        .toggleClass( data.classes.active, data.pagination.recordsPerPage === this )
+        .toggleClass(
+          data.classes.paginationRowCountButton,
+          data.classes.paginationRowCountButton )
         .appendTo( pageSizeSelection );
@@ -400,6 +398,5 @@ } );
 
-    function toggleButtons( disabled, buttons ) {
+    function toggleButtons( buttons, disabled ) {
       $.each( buttons, function() {
-        var classToggler = ( disabled ) ? this.addClass : this.removeClass;
-        classToggler( classes.disabled );
+        this.toggleClass( data.classes.disabled, disabled );
         this.attr( 'disabled', disabled );
@@ -411,7 +408,7 @@ } );
     toggleButtons(
-      data.pagination.currentPage === 1,
-      [ data.$linkFirstPage, data.$linkPrevPage ] );
+      [ data.$linkFirstPage, data.$linkPrevPage ],
+      data.pagination.currentPage === 1 );
     toggleButtons(
-      data.pagination.currentPage === data.pagination.lastPage,
-      [ data.$linkLastPage, data.$linkNextPage ] );
+      [ data.$linkLastPage, data.$linkNextPage ],
+      data.pagination.currentPage === data.pagination.lastPage );
 
@@ -448,12 +445,20 @@ // Update page number tracker
 $.fn[ pluginName ] = function( method ) {
-  if ( methods.hasOwnProperty( method ) ) {
+  if ( $.isPlainObject( method ) || method === undefined ) {
+    return this.each( function() {
+      methods.init.call( $( this ), method );
+    } );
+  } else if ( methods.hasOwnProperty( method ) ) {
+    var actualMethod = methods[ method ];
     var methodArgs = Array.prototype.slice.call( arguments, 1 );
-    return methods[ method ].apply( this, methodArgs );
+    return this.each( function() {
+      actualMethod.apply( $( this ), methodArgs );
+    } );
   }
-  if ( typeof method === 'object' || !method ) {
-    return methods.init.apply( this, arguments );
-  }
   $.error( 'The method ' + method + ' literally does not exist. Good job.' );
 };
 
+$.fn[ pluginName ].classes = classes;
+$.fn[ pluginName ].copy = copy;
+$.fn[ pluginName ].methods = methods;
+
 } )( jQuery );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

272890

increased by2.59%

Number of package files

30

increased by3.45%

Lines of code

4911

increased by0.97%

Number of lines in readme file

286

increased by0.35%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes