diff --git a/src/dataTables.uikit3-todo.js b/src/dataTables.uikit3-todo.js new file mode 100644 index 0000000..0588a03 --- /dev/null +++ b/src/dataTables.uikit3-todo.js @@ -0,0 +1,186 @@ +/*! DataTables UIkit 3 integration + */ + +/** + * This is a tech preview of UIKit integration with DataTables. + */ +(function(factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery', 'datatables.net'], function($) { + return factory($, window, document); + }); + } + else if (typeof exports === 'object') { + // CommonJS + module.exports = function(root, $) { + if (!root) { + root = window; + } + + if (!$ || !$.fn.dataTable) { + // Require DataTables, which attaches to jQuery, including + // jQuery if needed and have a $ property so we can access the + // jQuery object that is used + $ = require('datatables.net')(root, $).$; + } + + return factory($, root, root.document); + }; + } + else { + // Browser + factory(jQuery, window, document); + } +}(function($, window, document, undefined) { + 'use strict'; + var DataTable = $.fn.dataTable; + + + /* Set the defaults for DataTables initialisation */ + $.extend(true, DataTable.defaults, { + dom: + "<'row uk-grid'<'uk-width-1-2'l><'uk-width-1-2'f>>" + + "<'row uk-grid dt-merge-grid'<'uk-width-1-1'tr>>" + + "<'row uk-grid dt-merge-grid'<'uk-width-2-5'i><'uk-width-3-5'p>>", + renderer: 'uikit', + // todo: these are unrelated look and feel tweaks + language: { + zeroRecords: '
We didn\'t find anything
', + sEmptyTable: '
The table is empty
' + } + }); + + /* Default class modification */ + $.extend(DataTable.ext.classes, { + sWrapper: "dataTables_wrapper uk-form dt-uikit", + sFilterInput: "uk-form-small uk-search-input", + sLengthSelect: "uk-form-small", + sProcessing: "dataTables_processing uk-panel", + }); + + + /* UIkit paging button renderer */ + DataTable.ext.renderer.pageButton.uikit = function(settings, host, idx, buttons, page, pages) { + var api = new DataTable.Api(settings); + var classes = settings.oClasses; + var lang = settings.oLanguage.oPaginate; + var aria = settings.oLanguage.oAria.paginate || {}; + var btnDisplay, btnClass, counter = 0; + + var attach = function(container, buttons) { + var i, ien, node, button; + var clickHandler = function(e) { + e.preventDefault(); + if (!$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action) { + api.page(e.data.action).draw('page'); + } + }; + + for (i = 0, ien = buttons.length; i < ien; i++) { + button = buttons[i]; + + if ($.isArray(button)) { + attach(container, button); + } + else { + btnDisplay = ''; + btnClass = ''; + + switch (button) { + case 'ellipsis': + btnDisplay = '...'; + btnClass = 'uk-disabled disabled'; + break; + + case 'first': + btnDisplay = lang.sFirst; + btnClass = (page > 0 ? + '' : ' uk-disabled disabled'); + break; + + case 'previous': + btnDisplay = ' ' + lang.sPrevious; + btnClass = (page > 0 ? + '' : 'uk-disabled disabled'); + break; + + case 'next': + btnDisplay = lang.sNext + ''; + btnClass = (page < pages - 1 ? + '' : 'uk-disabled disabled'); + break; + + case 'last': + btnDisplay = lang.sLast; + btnClass = (page < pages - 1 ? + '' : ' uk-disabled disabled'); + break; + + default: + btnDisplay = button + 1; + btnClass = page === button ? + 'uk-active' : ''; + break; + } + + if (btnDisplay) { + node = $('
  • ', { + 'class': classes.sPageButton + ' ' + btnClass, + 'id': idx === 0 && typeof button === 'string' ? + settings.sTableId + '_' + button : + null + }) + .append($((-1 != btnClass.indexOf('disabled') || -1 != btnClass.indexOf('active')) ? '' : '', { + 'href': '#', + 'aria-controls': settings.sTableId, + 'aria-label': aria[button], + 'data-dt-idx': counter, + 'tabindex': settings.iTabIndex + }) + .html(btnDisplay) + ) + .appendTo(container); + + settings.oApi._fnBindAction( + node, {action: button}, clickHandler + ); + + counter++; + } + } + } + }; + + // IE9 throws an 'unknown error' if document.activeElement is used + // inside an iframe or frame. + var activeEl; + + try { + // Because this approach is destroying and recreating the paging + // elements, focus is lost on the select button which is bad for + // accessibility. So we want to restore focus once the draw has + // completed + activeEl = $(host).find(document.activeElement).data('dt-idx'); + } + catch (e) {} + + if ($.isArray(buttons) && + buttons.filter(function(button) { + return $.isArray(button) && button.length < 2; + }).length) { + buttons = [] // Hide pagination control if there is only one page + } + attach( + $(host).empty().html('
      ').children('ul'), + buttons + ); + + if (activeEl !== undefined) { + $(host).find('[data-dt-idx=' + activeEl + ']').focus(); + } + }; + + + return DataTable; +})); diff --git a/src/dataTables.uikit3.js b/src/dataTables.uikit3.js index 0588a03..1e15aa5 100644 --- a/src/dataTables.uikit3.js +++ b/src/dataTables.uikit3.js @@ -43,12 +43,7 @@ "<'row uk-grid'<'uk-width-1-2'l><'uk-width-1-2'f>>" + "<'row uk-grid dt-merge-grid'<'uk-width-1-1'tr>>" + "<'row uk-grid dt-merge-grid'<'uk-width-2-5'i><'uk-width-3-5'p>>", - renderer: 'uikit', - // todo: these are unrelated look and feel tweaks - language: { - zeroRecords: '
      We didn\'t find anything
      ', - sEmptyTable: '
      The table is empty
      ' - } + renderer: 'uikit' }); /* Default class modification */