tablesorter.js

/**
 * Backend configuration for MediaAccessManagement tool.
 * @version 0.0.3
 */


var apiUrl = ajaxurl + '?action=MediaAccessManager&process=loadMatrix&page={page+1}&size={size}&{sortList:sort}&{filterList:filter}';

jQuery(function ($) {

    var MediaAccessManagerMatrix = {

        insertRedInput: function (value) {
            return '<div class = "entry input-group">' +
                '   <input class="form-control prefix" name="fields[]" type="text" value="' + value + '" readonly>' +
                '   <span class="input-group-btn">' +
                '       <button class="btn btn-remove btn-danger" type="button">' +
                '           <span class="glyphicon glyphicon-minus"></span>' +
                '       </button>' +
                '   </span>' +
                '</div>';
        },


        collectData: function () {
            var data = {};
            $('.product').each(function () {
                var productTitle    = $(this).find('.product-title').html();
                var productPrefixes = $(this).find('.prefix');
                data[productTitle]  = [];

                productPrefixes.each(function () {
                    data[productTitle].push($(this).val());
                });

                console.info(data);
            });

            MediaAccessManagerMatrix.saveChange(data);
        },


        saveChange: function (selectedRightArray) {
            var selectedRightsJSON = JSON.stringify(selectedRightArray);
            var data = {
                selectedRights: selectedRightsJSON,
                action:         'MediaAccessManager',
                nonce:          MediaAccessManager.nonce,
                process:        'updateAutoRules'
            };

            $.post(MediaAccessManager.ajaxurl, data);
        },

        commonSetup: function () {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                if (e.target.hash == '#tab2') {

                    $('.btn-add').click(function () {
                        var parent   = $(this).parents('.entry');
                        var newValue = parent.find('input').val();
                        parent.find('input').val('');
                        parent.before(MediaAccessManagerMatrix.insertRedInput(newValue));
                        MediaAccessManagerMatrix.collectData();
                    });

                    $(document).on('click', '.btn-remove', function () {
                        $(this).parents('.entry').remove();
                        MediaAccessManagerMatrix.collectData();
                    });
                } else {
                    MediaAccessManagerMatrix.initTablesorter();
                }
            });


            $('#confirm-delete').on('click', '.btn-ok', function (e) {
                var $modalDiv = $(e.delegateTarget);
                var buttonYes = $(this);
                var data      = {
                    'action':  'MediaAccessManager',
                    'process': 'autoAssignRules'
                };
                buttonYes.addClass('disabled');
                $.post(ajaxurl, data).done(function () {
                    $('table').trigger('pagerUpdate');
                    $modalDiv.modal('hide').removeClass('loading');
                    buttonYes.removeClass('disabled');
                });
                $modalDiv.addClass('loading');
            });
        },

        initTablesorter: function () {
            var tab   = $('#tab1');
            var table = tab.find('table');
            if (table[0].config) {
                table.trigger('applyWidgets');
            } else {
                table.tablesorter({
                    //debug:             true,
                    theme:             'blue',
                    dateFormat:        "yyyy-mm-dd",
                    initialized:       function () {
                        // don't remove busy icon on sortEnd
                        table.off('sortEnd' + table[0].config.namespace);
                        setTimeout(function () {
                            $(window).resize();
                        }, 500);
                    },
                    showProcessing:    true,
                    widthFixed:        true,
                    sortLocaleCompare: true,
                    widgets:           ["columnSelector", "filter", "zebra", "pager", 'stickyHeaders'],
                    widgetOptions:     {
                        resizable_throttle:         true,
                        columnSelector_saveColumns: true,
                        columnSelector_mediaquery:  false,
                        columnSelector_container:   tab.find('.popover-target'),
                        pager_selectors:            {
                            container: tab.find('.pager')
                        },
                        pager_ajaxUrl:              apiUrl,
                        pager_customAjaxUrl:        function (table, url) {
                            var c = table.config;
                            c.$tbodies.eq(0).empty();
                            $.tablesorter.isProcessing(c.table, true);
                            return url;
                        },
                        pager_ajaxProcessing:       function (result, table, xhr) {
                            if (result) {
                                result.rows = $(result.rows);

                                return result;
                            }
                        },
                        pager_processAjaxOnInit:    true,
                        pager_output:               'Displaying page {page} (row {startRow} to {endRow}) ' +
                                                    'from {filteredRows} filtered (total {totalRows}) rows.',
                        pager_updateArrows:         true,
                        pager_page:                 0,
                        pager_size:                 25,
                        pager_savePages:            false,
                        pager_storageKey:           'tablesorter-pager',
                        pager_pageReset:            0,
                        pager_fixedHeight:          false,
                        pager_removeRows:           true,
                        pager_countChildRows:       false,
                        filter_serversideFiltering: false,
                        filter_reset:               'button.reset',
                        stickyHeaders_offset:       30,
                        stickyHeaders_cloneId:      ''
                    }
                }).on('filterStart', function () {
                    $('button.reset').fadeIn();
                }).on('click', 'td.truncate', function () {
                    $(this).toggleClass('show');
                }).on('pagerComplete', function () {

                        //updating media rights on clicks
                        $('tbody td:not(.no-select)').click(function () {
                            $(this).toggleClass('green');
                            var row                = $(this).closest('tr');
                            var mediaID            = row.children().eq(0).text();
                            var selectedCells      = row.find('td.green');
                            var selectedRightArray = [];
                            selectedCells.each(function (idx) {
                                var rightID = table.find("th").eq($(this).index()).attr('data-id');
                                selectedRightArray.push(rightID);
                            });
                            var data = {
                                "attachment-rights": selectedRightArray,
                                action:              'MediaAccessManager',
                                itemID:              $.trim(mediaID),
                                nonce:               MediaAccessManager.nonce,
                                process:             'save',
                                source:              'matrix'
                            };
                            $.post(MediaAccessManager.ajaxurl, data);
                        });

                        //Highlighting column headers of hovered cells
                        $("table").delegate('td', 'mouseover mouseleave', function (e) {
                            var cell   = $(this);
                            var column = table.find('th,td').eq(cell.index() + 1);

                            if (e.type == 'mouseover') {
                                column.addClass("hover");
                            } else {
                                column.removeClass("hover");
                            }
                        });
                    }
                );

                tab.find('.popover-button').popover({
                    placement: 'bottom',
                    html:      true,
                    content:   tab.find('.popover-target')
                });

                tab.find('.toggle-assigned').on('change', function () {
                    var ajaxUrl = table[0].config.widgetOptions.pager_ajaxUrl;
                    if ($(this).is(':checked')) {
                        $(this).siblings('span').html('Assigned Files Hidden');
                        ajaxUrl = ajaxUrl + '&hideAssigned';
                    } else {
                        $(this).siblings('span').html('Hide Already Assigned');
                        ajaxUrl = ajaxUrl.replace('&hideAssigned', '');
                    }
                    table[0].config.widgetOptions.pager_ajaxUrl = ajaxUrl;
                    $(table).trigger('pagerUpdate');
                })

            }

        }

    };

    MediaAccessManagerMatrix.commonSetup();
    MediaAccessManagerMatrix.initTablesorter();
});