itube-specs 0.0.968 → 0.0.969

package/components/player/aside-videos.vue

@@ -89,8 +89,10 @@ defineProps<{
     inset: 0;
     overflow-y: auto;
 
-    // полоса прокрутки не должна наезжать на карточки
-    padding-right: 4px;
+    /* Контейнер прокрутки обрезает всё, что элементы рисуют ЗА своей границей, —
+       кольцо аватара модели и рамки фокуса. Отступ в 2px даёт им место; справа
+       к нему добавлено расстояние до полосы прокрутки. */
+    padding: 2px 6px 2px 2px;
   }
 }
 </style>

package/components/ui/dropdown.vue

@@ -8,6 +8,7 @@
       {'--center': center},
       {'--open': open},
       {'--separate': separateLastChild},
+      {'--escaped': escaped},
     ]"
     class="ui-dropdown"
     @mouseleave="mouseHandler(false)"
@@ -26,7 +27,10 @@
       <dialog
         v-if="useVIf ? open && $slots.items : true"
         ref="menuRef"
-        :style="!useVIf ? { display: (open && $slots.items) ? '' : 'none' } : {}"
+        :style="[
+          !useVIf ? { display: (open && $slots.items) ? '' : 'none' } : {},
+          escapedStyle,
+        ]"
         :class="{'--open': open}"
         class="ui-dropdown__menu"
         @click="close"
@@ -92,9 +96,75 @@ const { registerOverlay, releaseOverlay } = useOverlayStack();
 const breakpoints = CSS_BREAKPOINTS;
 const { isTablet } = checkDeviceWidth(breakpoints);
 
+/**
+ * Выпадашка внутри прокручиваемого блока (боковая колонка плеера, например)
+ * обрезается его `overflow` — меню уходит под край. Уводить его в `position: fixed`
+ * всегда не стали: у обычных выпадашек координаты считает браузер, и это надёжнее.
+ * Поэтому смотрим, есть ли над нами прокручиваемый предок, и только тогда считаем
+ * координаты сами. `overflow: hidden` не в счёт — там выпадашки и так живут.
+ */
+function hasScrollableAncestor(element: HTMLElement | null): boolean {
+  let node = element?.parentElement || null;
+
+  while (node && node !== document.body) {
+    const { overflowX, overflowY } = getComputedStyle(node);
+
+    if (/auto|scroll/.test(`${overflowX} ${overflowY}`)) return true;
+
+    node = node.parentElement;
+  }
+
+  return false;
+}
+
+/** Меню выведено из потока и позиционируется от экрана. */
+const escaped = ref(false);
+const escapedStyle = ref<Record<string, string>>({});
+
+/** Координаты меню от триггера: вниз, а если не влезает — вверх; прижимаем к экрану. */
+function placeEscaped() {
+  const trigger = dropdownRef.value?.getBoundingClientRect();
+  const menu = menuRef.value;
+  if (!trigger || !menu) return;
+
+  const gap = 4;
+  const edge = 8;
+  const { offsetWidth: width, offsetHeight: height } = menu;
+
+  const below = trigger.bottom + gap;
+  const flip = below + height > window.innerHeight;
+  autoTop.value = flip;
+
+  let left = props.right ? trigger.right - width : trigger.left;
+  if (props.center) left = trigger.left + (trigger.width - width) / 2;
+
+  escapedStyle.value = {
+    top: `${Math.max(edge, flip ? trigger.top - height - gap : below)}px`,
+    left: `${Math.min(Math.max(edge, left), window.innerWidth - width - edge)}px`,
+  };
+}
+
+/** Прокрутка любого предка сдвигает триггер — пересчитываем, пока меню открыто. */
+function onViewportChange() {
+  requestAnimationFrame(placeEscaped);
+}
+
+function bindViewportListeners(bind: boolean) {
+  const method = bind ? 'addEventListener' : 'removeEventListener';
+
+  window[method]('scroll', onViewportChange, true);
+  window[method]('resize', onViewportChange);
+}
+
 function checkPosition() {
   if (!dropdownRef.value || !menuRef.value || isTablet.value) return;
   requestAnimationFrame(() => {
+    if (escaped.value) {
+      placeEscaped();
+
+      return;
+    }
+
     const triggerRect = dropdownRef.value.getBoundingClientRect();
     const menuHeight = menuRef.value.scrollHeight;
     const spaceBelow = window.innerHeight - triggerRect.bottom;
@@ -104,6 +174,12 @@ function checkPosition() {
 
 function openDropdown() {
   open.value = !open.value;
+
+  if (open.value && !isTablet.value) {
+    escaped.value = hasScrollableAncestor(dropdownRef.value);
+    if (escaped.value) bindViewportListeners(true);
+  }
+
   if (open.value) nextTick(() => checkPosition());
 
   if (isTablet.value && open.value) {
@@ -117,6 +193,8 @@ function openDropdown() {
 
 function close() {
   open.value = false;
+  bindViewportListeners(false);
+  escapedStyle.value = {};
 
   if (isTablet.value) {
     nextTick(() => {
@@ -139,6 +217,8 @@ watch(open, (val) => {
 });
 
 onBeforeUnmount(() => {
+  bindViewportListeners(false);
+
   if (open.value && isTablet.value) {
     scrollUnlock();
     releaseOverlay(menuRef.value);
@@ -278,6 +358,17 @@ defineExpose({ openDropdown, open });
   }
 }
 
+/* Меню внутри прокручиваемого блока: позиционируется от экрана, координаты считает
+   скрипт (см. placeEscaped) — браузерные `bottom`/`transform` здесь только мешают. */
+.ui-dropdown.--escaped .ui-dropdown__menu {
+  @include from-br(md) {
+    position: fixed;
+    right: auto;
+    bottom: auto;
+    transform: none;
+  }
+}
+
 .ui-dropdown__menu-items > .ui-dropdown__item {
   @include font-md;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.968",
+  "version": "0.0.969",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {