/* * _table.js */ irma.table = (function () { 'use strict'; var ct = {}, resizing = false, dragging = false, minWidth = 10, $body = $('body'), dragStart, $searchForm; var resizeTable = function (e) { var t = ct, deltaX = t.mouse.x - e.pageX, width = []; if (t.width[0] - deltaX > t.min && t.width[1] + deltaX > t.min) { for (var i = 0; i < 2; i++) { width[i] = t.width[i] + (2 * i - 1) * deltaX; t.$column[i].css({ width: "" + width[i] + "px" }); } } }; var isDragging = function () { return resizing || dragging; }; var saveTable = function () { var t = ct, pct = []; for (var i = 0; i < 2; i++) { pct[i] = 100 * t.$column[i].outerWidth() / t.$column[i].closest('.table-group').width(); t.$column[i].css('width', '' + pct[i] + '%'); } var customGUI = irma.storage.get('userSettings').customGUI || { columns: [] }; _.forEach(customGUI.columns, function (column, i) { for (var j = 0; j < 2; j++) { if (t.$column[j].data().name == column.name) { customGUI.columns[i].width = '' + pct[j] + ''; } } }); irma.settings.saveGUI(customGUI, ($searchForm.length > 0)); }; var dragColumn = function (e) { var position = { x: ct.position.x - (ct.mouse.x - e.pageX), y: ct.position.y - (ct.mouse.y - e.pageY) }; ct.$drag.css({ left: '' + position.x + 'px', top: '' + position.y + 'px' }); if (Math.abs(ct.mouse.x - e.pageX) > 20) { _.forEach(ct.grid, function (line, i) { if ((i === 0 && position.x < line) || (position.x < line && position.x >= ct.grid[i - 1] - 40)) { ct.$column.css('order', i * 10 + 5); ct.newOrder = i; } else if (position.x >= line - 40) { ct.$column.css('order', i * 10 + 15); ct.newOrder = i + 1; } }); } else { ct.$column.css('order', ct.column * 10); ct.newOrder = ct.column; } }; var setColumn = function () { $('.column-drag').animate({ opacity: 0 }, 300, function () { $(this).remove(); }); ct.$column.removeClass('-dragging'); if (ct.column != ct.newOrder) { var settings = irma.storage.get('userSettings'), customGUI = settings.customGUI, columns = customGUI.columns, order = ct.column - 1, mover = columns[order], prev; ct.newOrder += ct.newOrder > order ? -1 : 0; _.forEach(columns, function (column, i) { if (ct.newOrder > order) { if (i > order && i <= ct.newOrder) { columns[i - 1] = column; } } else if (ct.newOrder < order) { if (i >= ct.newOrder && i < order) { if (i == ct.newOrder) { prev = column; } var c = columns[i + 1]; columns[i + 1] = prev; prev = c; } } }); columns[ct.newOrder] = mover; customGUI.columns = columns; irma.settings.saveGUI(customGUI, ($searchForm.length > 0)); var searchResults = irma.storage.get('searchResults'); irma.searchPanel.sortRecords(searchResults.results, searchResults.data); } }; var init = function () { $searchForm = $('.search-form'); $(document).on('mousedown', '.js-table-handle', function (e) { e.stopPropagation(); ct = { $table: $(this).closest('.table'), $group: $(this).closest('.table-group'), column: $(this).closest('.table-cell').index(), $handle: $(this), mouse: { x: e.pageX, y: e.pageY } }; ct.min = ct.$group.width() * minWidth / 100; ct.$column = []; ct.width = []; ct.pct = []; for (var i = 0; i < 2; i++) { ct.$column[i] = ct.$table.find('.table-cell:not(.table-actions)').filter(":nth-child(" + (ct.column + i + 1).toString() + ")"); ct.width[i] = ct.$column[i].outerWidth(); ct.pct[i] = 100 * ct.width[i] / ct.$group.outerWidth(); } resizing = true; $('body, .table-row').css({ 'cursor': 'col-resize', 'user-select': 'none' }); }).on('mousemove', function (e) { if (resizing) { resizeTable(e); } }).on('mouseup', function () { if (resizing) { resizing = false; $('body').css({ 'cursor': 'auto', 'user-select': 'auto' }); $('.table-row').css({ 'cursor': 'pointer', 'user-select': 'auto' }); saveTable(); } }); $(document).on('mousedown', '.js-table-drag', function (e) { ct = { $table: $(this).closest('.table'), column: $(this).closest('.table-cell').index() + 1, mouse: { x: e.pageX, y: e.pageY }, width: $(this).closest('.table-cell').outerWidth(), grid: [] }; ct.newOrder = ct.column; ct.position = { x: $(this).offset().left, y: $(this).offset().top - $(window).scrollTop() }; ct.$table.find('.table-row .table-group:not(.actions-group)').eq(0).find('.table-cell').each(function (i) { ct.grid[i] = $(this).offset().left + 20; }); ct.$column = ct.$table.find('.table-group:not(.actions-group) .table-cell:nth-child(' + ct.column +')'); var $html = $('
').addClass('column-drag').css({ left: '' + ct.position.x + 'px', top: '' + ct.position.y + 'px', width: '' + ct.width + 'px' }); ct.$column.each(function () { $html.append($(this).clone().removeAttr('style')); }); $('body').css('user-select', 'none'); dragStart = setTimeout(function () { dragging = true; ct.$table.append($html); ct.$drag = ct.$table.find('.column-drag'); ct.$column.addClass('-dragging'); }, 200); }).on('mousemove', function (e) { if (dragging) { dragColumn(e); } }).on('mouseup', function (e) { clearInterval(dragStart); if (dragging) { dragging = false; setColumn(); } $('body').css('user-select', 'auto'); }); $(document).on('mouseover', '.table-link', function (e) { $(this).addClass('-hover'); }).on('mouseout', '.table-link', function (e) { $(this).removeClass('-hover'); }); $(document).on('click', '.js-table-checkbox', function () { $(this).find('*').blur(); }).on('click', '.js-table-select', function () { var $table = $(this).closest('.table'), $form = $(this).closest('form'), message = $(this).data().message; $table.find('input:checked').not($(this).find('input')).prop('checked', false); if ($table.find('input:checked').length) { message = message && message.length ? message : "No message provided"; $form.find('.approval-message .body').html(message); $form.find('.hidden-group').removeClass('-hidden'); } else { $form.find('.hidden-group').addClass('-hidden'); } }).on('click', '.js-table-link', function () { window.location = $(this).data().href; }).on('click', '.table-cell input', function (e) { e.stopPropagation(); var $row = $(this).closest('.js-table-checkbox'), $checkbox = $row.find("input[type='checkbox']"); if ($row.length && !$checkbox.is(':checked')) { $checkbox.prop('checked', true); } }).on('mouseover', '.table-row.-with-input', function () { $(this).addClass('-hover'); }).on('mouseout', '.table-row.-with-input', function () { $(this).removeClass('-hover'); }); // table addition $(document).on('keyup change', '.js-table-addend', function () { var $row = $(this).closest('.table-row'), $addends = $row.find('.js-table-addend input'), $sum = $row.find('.js-table-sum'); var sum = function ($array) { var addend = $array.eq(0).val(); return ($array.length === 0) ? 0 : (addend.length ? parseInt(addend) : 0) + sum($array.slice(1)); }; $sum.find('.text').text(sum($addends)); $sum.find('input').val(sum($addends)); }); }; return { init: init, isDragging: isDragging }; }());