Skip to content

Commit

Permalink
Add mobile styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Teihden
Teihden committed Aug 1, 2023
1 parent 4025b5a commit 9d2caa3
Show file tree
Hide file tree
Showing 20 changed files with 830 additions and 627 deletions.
56 changes: 10 additions & 46 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"puglint-stylish": "^1.1.0",
"sass": "^1.64.1",
"stylelint": "^15.10.2",
"stylelint-config-standard": "^34.0.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-config-standard-scss": "^10.0.0",
"stylelint-order": "^6.0.3"
},
Expand Down
40 changes: 40 additions & 0 deletions src/js/modules/data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const data = [
{
order: 1,
unitName: 'Мраморный щебень фр. 2-5 мм, 25кг (вайт)',
price: 1231,
quantity: 12,
delivery: 1500,
load: 100,
productName: 'Мраморный щебень',
},
{
order: 2,
unitName: 'Мраморный щебень фр. 2-5 мм, 25кг',
price: 1231,
quantity: 12,
delivery: 1500,
load: 100,
productName: 'Мраморный щебень',
},
{
order: 3,
unitName: 'Мраморный щебень фр. 2-5 мм, 25кг',
price: 1231,
quantity: 12,
delivery: 1500,
load: 100,
productName: 'Мраморный щебень',
},
{
order: 4,
unitName: 'Мраморный щебень фр. 2-5 мм, 25кг',
price: 1231,
quantity: 12,
delivery: 1500,
load: 100,
productName: 'Мраморный щебень',
},
];

export { data };
170 changes: 156 additions & 14 deletions src/js/modules/datatables.js
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,182 @@
/* eslint-disable arrow-body-style */
/* eslint-disable no-unused-vars */
/* eslint-disable no-shadow */
/* eslint-disable object-shorthand */
/* eslint-disable no-undef */
/* eslint-disable semi */
import { initColResizable, removeColResizable } from './colresizable.js';
import { createDeleteButton } from './delete-button.js';
import { debounce } from './utils.js';
import { data } from './data.js';

const POPOVER_TITLE = `<span class="data-table__filter-text data-table__filter-text--main">Отображение столбцов</span>
<svg class="data-table__filter-breadcrumbs data-table__filter-breadcrumbs--main"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;

const POPOVER_TEXT = `<span class="data-table__filter-text">Отображение столбцов</span>
<svg class="data-table__filter-breadcrumbs"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;

const MULTIPOINT_BUTTON = `<div class="data-table__container-cell data-table__container-cell--multipoint">
<button class="data-table__multipoint-button" type="button">
const MULTIPOINT_BUTTON = `<button class="data-table__multipoint-button" type="button">
<svg class="data-table__multipoint"><use href="img/icons/sprite.svg#multipoint"></use></svg>
<span class="visually-hidden">Удалить строку</span></button></div>`;
<span class="visually-hidden">Удалить строку</span></button>`;

// const ORDER = (index) => `<div class="data-table__container-cell">
// <button class="data-table__drag" type="button">
// <svg class="data-table__hamburger">
// <use href="img/icons/sprite.svg#hamburger"></use></svg>
// <span class="data-table__body-order">${index}</span></button></div>`;
const ORDER = (index) => `<button class="data-table__drag-button" type="button">
<svg class="data-table__drag">
<use href="img/icons/sprite.svg#hamburger"></use></svg>
<span class="data-table__order">${index}</span></button>`;

const INPUT = (value, type, name, placeholder) => `<input class="data-table__input" type="${type}"
name="${name}" value="${value}" placeholder="${placeholder}">`;

const SELECT = `<select class="data-table__select" name="unit-name">
<option value="Мраморный щебень фр. 2-5 мм, 25кг">Мраморный щебень фр. 2-5 мм, 25кг</option>
<option value="Мраморный щебень фр. 2-5 мм, 25кг (белый)">Мраморный щебень фр. 2-5 мм, 25кг (белый)</option>
<option value="Мраморный щебень фр. 2-5 мм, 25кг (вайт)">Мраморный щебень фр. 2-5 мм, 25кг (вайт)</option>
<option value="Мраморный щебень фр. 2-5 мм, 25кг, возврат">Мраморный щебень фр. 2-5 мм, 25кг, возврат</option>
<option value="Мраморный щебень фр. 2-5 мм, 1т">Мраморный щебень фр. 2-5 мм, 1т</option>
</select>`;

const initDatatable = (table) => {
const dataTable = table.DataTable({
// resizable: true,
data: data,
paging: false,
searching: false,
ordering: true,
info: false,
autoWidth: true, // Не работает с ColResizable
autoWidth: true,
colReorder: {
fixedColumnsLeft: 1,
},
rowReorder: {
selector: '.data-table__drag-button',
dataSrc: 0,
dataSrc: 'order',
},
columnDefs: [
{
targets: 0,
orderable: false
data: 'order',
title: 'Номер',
name: 'order',
orderable: false,
width: '3%',
createdCell: (td) => $(td).addClass('data-table__body-cell data-table__body-cell--order'),
render: (data) => ORDER(data),
},
{
targets: 1,
data: null,
orderable: false,
title: 'Действие',
name: 'action',
width: '4.5%',
createdCell: (td) => {
$(td).attr('data-label', 'Действие');
$(td).addClass('data-table__body-cell data-table__body-cell--action');
},
render: () => MULTIPOINT_BUTTON,
},
{
targets: 2,
data: 'unitName',
orderable: false,
title: 'Наименование единицы',
name: 'unitName',
createdCell: (td, cellData, rowData, row, col) => {
const cell = $(td);
const select = $(SELECT);

select.val(cellData);
cell.attr('data-label', 'Наименование единицы');
cell.addClass('data-table__body-cell');
cell.append(select)
},
render: () => null,
},
{
targets: 3,
data: 'price',
orderable: false,
title: 'Цена',
name: 'price',
createdCell: (td) => {
const cell = $(td);

cell.attr('data-label', 'Цена');
cell.addClass('data-table__body-cell');
},
render: (data) => INPUT(data, 'number', 'price', 'Цена'),
},
{
targets: 4,
data: 'quantity',
orderable: false,
title: 'Кол-во',
name: 'quantity',
createdCell: (td) => {
const cell = $(td);

cell.attr('data-label', 'Кол-во');
cell.addClass('data-table__body-cell');
},
render: (data) => INPUT(data, 'number', 'quantity', 'Кол-во'),
},
{
targets: 5,
data: 'quantity',
orderable: false,
title: 'Цена доставки, руб',
name: 'delivery',
createdCell: (td) => {
const cell = $(td);

cell.attr('data-label', 'Цена доставки, руб');
cell.addClass('data-table__body-cell');
},
render: (data) => INPUT(data, 'number', 'delivery', 'Цена доставки, руб'),
},
{
targets: 6,
data: 'load',
orderable: false,
title: 'Max грузоподъемность, кг',
name: 'load',
createdCell: (td) => {
const cell = $(td);

cell.attr('data-label', 'Max грузоподъемность, кг');
cell.addClass('data-table__body-cell');
},
render: (data) => INPUT(data, 'number', 'load', 'Max грузоподъемность, кг'),
},
{
targets: 7,
data: 'load',
orderable: false,
title: 'Название товара',
name: 'load',
createdCell: (td) => {
const cell = $(td);

cell.attr('data-label', 'Название товара');
cell.addClass('data-table__body-cell');
},
render: (data) => INPUT(data, 'number', 'load', 'Название товара'),
},
{
targets: 8,
data: null,
orderable: false,
title: 'Итого',
name: 'load',
createdCell: (td) => {
const cell = $(td);

cell.attr('data-label', 'Итого');
cell.addClass('data-table__body-cell');
},
render: (data) => INPUT(data, 'number', 'load', 'Итого'),
},
{ targets: '_all', orderable: false },
],
createdRow: (row, data, dataIndex) => $(row).addClass('data-table__body-row'),
dom: 'Bfrtip',
buttons: [{
extend: 'collection',
Expand All @@ -62,7 +194,10 @@ const initDatatable = (table) => {
},
],
}],
initComplete: () => initColResizable(table),
initComplete: () => {
$('th', table).addClass('data-table__head-cell');
initColResizable(table)
},
});

dataTable.on('column-reorder', () => {
Expand All @@ -81,6 +216,13 @@ const initDatatable = (table) => {
evt.preventDefault();
createDeleteButton(evt, dataTable);
});

const onWindowResize = debounce(() => {
table.css('width', '100%');
dataTable.columns.adjust().draw();
}, 250);

window.addEventListener('resize', onWindowResize);
};

export { initDatatable };
1 change: 0 additions & 1 deletion src/js/modules/delete-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ const DELETE_BUTTON = `<button class="data-table__delete-button" type="button">
<span class="data-table__delete-button-text">Удалить</span></button>`;

const closeDeleteButton = (deleteButton, target) => {
console.log(target);
deleteButton.fadeTo('fast', 0, () => deleteButton.remove());
target.removeClass('data-table__multipoint-button--active');
$(document).off();
Expand Down
11 changes: 10 additions & 1 deletion src/js/modules/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,13 @@ const handleEscapeKey = (callback, evt) => {
}
};

export { handleEscapeKey };
const debounce = (callback, timeoutDelay = 500) => {
let timeoutId;

return (...rest) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
};
};

export { handleEscapeKey, debounce };
Loading

0 comments on commit 9d2caa3

Please sign in to comment.