Add some fixies (custom-select, styles)

Teihden · Aug 2, 2023 · 97fb0b4 · 97fb0b4
1 parent 91eedf6
commit 97fb0b4
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 25 deletions.
diff --git a/src/js/modules/add-row.js b/src/js/modules/add-row.js
@@ -1,3 +1,5 @@
+import { initCustomSelect } from './custom-select.js';
+
 const { $ } = window;
 
 const onNewRowButtonClick = (dataTable) => {
@@ -17,7 +19,12 @@ const onNewRowButtonClick = (dataTable) => {
     .draw()
     .node();
 
-  $('.data-table__select', newRow).get(0).focus({ focusVisible: true });
+  initCustomSelect();
+
+  const selectedOption = $('.custom-select__selected', newRow);
+
+  // selectedOption[0].focus({ focusVisible: true });
+  selectedOption[0].click();
 
   // вставить функцию для отправки данных на сервер
 };

diff --git a/src/js/modules/custom-select.js b/src/js/modules/custom-select.js
@@ -29,7 +29,7 @@ const onSelectedOptionClick = (evt) => {
   evt.preventDefault();
   evt.stopPropagation();
 
-  const target = $(evt.target);
+  const target = $(evt.currentTarget);
   const optionItemsContainer = target.next();
 
   if (optionItemsContainer.hasClass('custom-select__hide')) {
@@ -63,8 +63,10 @@ const addAccentClass = (_, htmlString) => {
 };
 
 const initCustomSelect = () => {
-  /* Ищем элементы с классом "custom-select": */
-  const customSelectContainers = $('.custom-select');
+  /* Ищем элементы с классом "custom-select",
+     Отфильтровываем те, которые уже инициализированы */
+  const customSelectContainers = $('.custom-select')
+    .not((_, container) => $.contains(container, $('.custom-select__selected', container)[0]));
 
   customSelectContainers.each((_, customSelectContainer) => {
     const select = $('.custom-select__select', customSelectContainer)[0];
@@ -73,7 +75,10 @@ const initCustomSelect = () => {
     который будет выступать в качестве выбранной опции: */
     $('<div></div>')
       .addClass('custom-select__selected')
-      .text(select.options[select.selectedIndex].innerHTML)
+      .attr('tabindex', '0')
+      .html($('<span></span>')
+        .text(select.options[select.selectedIndex].textContent)
+        .addClass('custom-select__selected-option'))
       .on('click', onSelectedOptionClick)
       .appendTo(customSelectContainer);
 

diff --git a/src/js/modules/datatables.js b/src/js/modules/datatables.js
@@ -226,7 +226,10 @@ const initDatatable = (table) => {
   const onWindowResize = debounce(() => {
     table.css('width', '100%');
     dataTable.columns.adjust().draw();
-  }, 100);
+
+    removeColResizable(table);
+    initColResizable(table);
+  }, 150);
 
   window.addEventListener('resize', onWindowResize);
 };

diff --git a/src/pug/includes/table.pug b/src/pug/includes/table.pug
@@ -6,22 +6,6 @@ section.table
       span.new-row-button__text Добавить строку
   .table__container#table-container
     table.table__data.data-table.nowrap#data-table
-
-    //- .custom-select
-    //-   select.custom-select__select(name="unit-name")
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг") Мраморный щебень фр. 2-5 мм, 25кг
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг (белый)") Мраморный щебень фр. 2-5 мм, 25кг (белый)
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг (вайт)") Мраморный щебень фр. 2-5 мм, 25кг (вайт)
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг, возврат") Мраморный щебень фр. 2-5 мм, 25кг, возврат
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 1т") Мраморный щебень фр. 2-5 мм, 1т
-    //- .custom-select
-    //-   select.custom-select__select(name="unit-name")
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг") Мраморный щебень фр. 2-5 мм, 25кг
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг (белый)") Мраморный щебень фр. 2-5 мм, 25кг (белый)
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг (вайт)") Мраморный щебень фр. 2-5 мм, 25кг (вайт)
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 25кг, возврат") Мраморный щебень фр. 2-5 мм, 25кг, возврат
-    //-     option(value="Мраморный щебень фр. 2-5 мм, 1т") Мраморный щебень фр. 2-5 мм, 1т
-
     table.table__result.result-table.nowrap#result-table
       tbody.result-table__body
         tr.result-table__row

diff --git a/src/scss/blocks/_custom-select.scss b/src/scss/blocks/_custom-select.scss
@@ -13,29 +13,38 @@
 .custom-select__selected {
   max-width: 100%;
   height: 35px;
-  padding: 8px 15px 7px 14px;
+  // padding: 8px 0 7px;
   border: solid 1px var(--chinese-silver);
   border-radius: 5px;
   background-color: var(--white);
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
+
+  .custom-select__selected-option {
+    padding: 8px 0 7px 14px;
+    overflow: hidden;
+    max-width: 100%;
+    display: block;
+  }
 }
 
 /* Контейнер c опциями */
 .custom-select__items {
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
+  right: 0;
   z-index: 100;
-  padding: 7px 10px;
+  min-width: min-content;
+  padding: 6px 10px;
   border: solid 1px var(--chinese-silver);
   border-radius: 5px;
   background-color: var(--white);
   box-shadow: $box-shadow-button;
   display: flex;
   flex-direction: column;
-  row-gap: 14px;
+  row-gap: 13px;
 }
 
 /* Стилизация опций, включая выбранный элемент */