diff --git a/src/content/docs/plugins/sort.mdx b/src/content/docs/plugins/sort.mdx index ccc27b8..a214728 100644 --- a/src/content/docs/plugins/sort.mdx +++ b/src/content/docs/plugins/sort.mdx @@ -76,42 +76,42 @@ Alpine.start(); ## Использование -Основным API для использования этого плагина является директива `x-sort`. Добавив `x-sort` к элементу, его дочерние элементы становятся сортируемыми - то есть вы можете перетаскивать их мышью, и они будут менять положение. +Основным API для использования этого плагина является директива `x-sort`. Добавив `x-sort` к элементу, его дочерние элементы, имеющие атрибут `x-sort:item`, становятся сортируемыми - то есть вы можете перетаскивать их мышью, и они будут менять положение. ```html live "x-sort"
``` ## Обработчики сортировки -Можно реагировать на изменения сортировки, передавая функцию-обработчик `x-sort` и добавляя ключи к каждому элементу с помощью `x-sort:key`. Вот пример простой функции-обработчика, которая показывает диалоговое окно с изменённым ключом элемента и его новой позицией: +Можно реагировать на изменения сортировки, передавая функцию-обработчик `x-sort` и добавляя ключи к каждому элементу с помощью `x-sort:item`. Вот пример простой функции-обработчика, которая показывает диалоговое окно с изменённым ключом элемента и его новой позицией: -```html live "x-sort:key" +```html live "x-sort:item"
-
``` -Обработчик `x-sort` будет вызываться каждый раз, когда порядок сортировки элементов изменится. Магия `$key` будет содержать ключ отсортированного элемента (полученный из `x-sort:key`), а `$position` будет содержать новую позицию элемента (с индексом `0`). +Обработчик `x-sort` будет вызываться каждый раз, когда порядок сортировки элементов изменится. Магия `$item` будет содержать ключ отсортированного элемента (полученный из `x-sort:item`), а `$position` будет содержать новую позицию элемента (с индексом `0`). -Вы также можете передать функцию-обработчик в `x-sort`, и эта функция получит `key` и `position` в качестве первого и второго параметра: +Вы также можете передать функцию-обработчик в `x-sort`, и эта функция получит `item` и `position` в качестве первого и второго параметров: ```html {1} -
+
``` @@ -120,19 +120,19 @@ Alpine.start(); ## Сортировка групп -Этот плагин позволяет перетаскивать элементы из одного сортируемого списка `x-sort` в другой, добавляя соответствующий модификатор `.group` в оба списка: +Этот плагин позволяет перетаскивать элементы из одного сортируемого списка `x-sort` в другой, добавляя соответствующее значение `x-sort:group` в оба списка: ```html live "x-sort.group"
-
``` @@ -140,23 +140,23 @@ Alpine.start(); Поскольку оба приведённых выше сортируемых списка используют одно и то же имя группы (`todos`), можно перетаскивать элементы из одного списка в другой. :::note -При использовании обработчиков сортировки типа `x-sort="handle"` и перетаскивании элемента из одной группы в другую будет вызван только обработчик списков назначения с ключом и новой позицией. +При использовании обработчиков сортировки типа `x-sort="handle"` и перетаскивании элемента из одной группы в другую будет вызван только обработчик списка назначения с ключом и новой позицией. ::: ## Держатели для перетаскивания -По умолчанию каждый дочерний элемент `x-sort` можно перетаскивать, щёлкая и перетаскивая в любом месте внутри него. Однако вы можете назначить более мелкий и конкретный элемент в качестве «держателя для перетаскивания», чтобы с остальными элементами можно было взаимодействовать как обычно, а на перетаскивание мыши реагировал только держатель: +По умолчанию каждый дочерний элемент `x-sort:item` можно перетаскивать, щёлкая и перетаскивая в любом месте внутри него. Однако вы можете назначить более мелкий и конкретный элемент в качестве «держателя для перетаскивания», чтобы с остальными элементами можно было взаимодействовать как обычно, а на перетаскивание мыши реагировал только держатель: ```html live "x-sort:handle"
@@ -176,9 +176,9 @@ Alpine.start(); ```html live "x-sort.ghost"
    -
  • бурундук
    • -
  • капибара
    • -
  • муравьед
    • +
  • бурундук
    • +
  • капибара
    • +
  • муравьед
``` @@ -199,9 +199,86 @@ Alpine.start();
    -
  • гиена
    • -
  • шакал
    • -
  • койот
    • +
  • гиена
    • +
  • шакал
    • +
  • койот
    • +
+
+``` + +## Класс `sorting` на элементе `body` + +Пока элемент перетаскивается, Alpine автоматически добавит класс `.sorting` к элементу `` страницы. + +Это полезно для стилизации любого элемента на странице условно, используя только CSS. + +Например, вы можете иметь предупреждение, которое отображается только во время сортировки элементов пользователем: + +```html +
+ Функциональность страницы при сортировке ограничена +
+``` + +Чтобы показать это только при сортировке, используйте CSS-селектор `body.sorting`: + +```css "body.sorting" +#sort-warning { + display: none; +} + +body.sorting #sort-warning { + display: block; +} +``` + +## Баг с CSS-свойством `hover` + +В настоящее время существует [баг в Chrome и Safari](https://issues.chromium.org/issues/41129937) (не в Firefox), который вызывает проблемы с наведением стилей. + +Рассмотрим HTML, где каждый элемент списка оформляется по-разному в зависимости от состояния наведения (здесь мы используем класс `.hover` от Tailwind для условного добавления рамки): + +```html +
+
страус
+
курица
+
павлин
+
+``` + +Если вы перетащите один из элементов в списке ниже, то увидите, что эффект наведения будет ошибочно применен к любому элементу на месте исходного: + +```html live +
+
    +
  • страус
    • +
  • курица
    • +
  • павлин
    • +
+
+``` + +Чтобы исправить это, используйте класс `.sorting`, применяемый к `body` при сортировке, чтобы ограничить эффект `hover`, который будет применяться только тогда, когда у `body` не будет класса `.sorting`. + +Вот как вы можете сделать это прямо в строке, используя произвольные варианты Tailwind: + + +```html +
+
страус
+
курица
+
павлин
+
+``` + +Теперь вы можете видеть, что эффект наведения применяется только к перетаскиваемому элементу, а не к остальным в списке. + +```html live +
+
    +
  • индюк
    • +
  • гусь
    • +
  • утка
``` @@ -213,13 +290,27 @@ Alpine выбирает разумные настройки по умолчан ```html live "x-sort:config"
    -
  • суррикат
    • -
  • норка (не перетаскивается)
    • -
  • белка
    • +
  • суррикат
    • +
  • норка (не перетаскивается)
    • +
  • белка
``` +```html live "animation: 0" +
+
    +
  • суррикат
    • +
  • норка
    • +
  • белка
    • +
+
+``` + +:::note +Любые переданные параметры конфигурации будут перезаписывать дефолтные значения Alpine. В случае с `animation` это нормально, однако помните, что перезапись `handle`, `group`, `filter`, `onSort`, `onStart` или `onEnd` может нарушить функциональность. +::: + import { LinkCard } from '@astrojs/starlight/components';