Ivan Ustûžanin

Всё правильно получается? stopPropagation не блокирует распространение события, в определении в документации ошибка?

неправильно, JS-события и стандартное поведение браузера связаны между собой опосредовано
если на событии не было вызвано event.preventDefault(), то действие по умолчанию произойдёт независимо от того дошло ли событие до цели или нет
более того есть события, которым чихать на event.preventDefault(), т.к. действие по умолчанию происходит до события (тот же input)

нет не нужно
браузер загружает и выполняет модули один раз, передавая при повторных импортах уже готовое «окружение» модуля: Modules are only executed once

0. причём здесь MSDN?
1. DIV.box не существует в указанной разметке, но существует div#box
2. для каждой радиокнопки (которая не обязательно должна быть именно радиокнопкой) делается свой вариант onclick="select('div#box', 'div.a')"
3. select() пишется элементарно:

function select(where, what) {
  for (const node of document.querySelectorAll(`${where} > :not(${what})`)) {
    node.setAttribute('aria-hidden', 'true');
    // то, что подразумевается под "скрывал"
  }
  for (const node of document.querySelectorAll(`${where} > ${what}`)) {
    node.removeAttribute('aria-hidden');
    // обратное тому, что подразумевается под "скрывал"
  }
}

4. если разметка такая, то всё теоретически можно сделать и на CSS без JS, но это уже другая история

после переименования select() в selectOne() всё работает — написанные строкой через атрибуты обработчики ЕМНИП имеют сам элемент как ближайший resolving-scope — тело как бы обёрнуто в with (this) { ... }, а у <input> есть свой select():

Где ошибка?

в лишнем кода и неверном использовании jQuery

$('body').click(function(event) { 
 if(!$(event.target).is('.li-tooltip span') && !$(event.target).is('.li-tooltip input')) {
-    $('.li-tooltip input').checked = 'false';
+    $('.li-tooltip input').prop('checked', false);
-    $('.li-tooltip span').hide();
}  
});
-  $('.li-tooltip input').on('click', function () {
-      $(this).parents().children('span').toggle();
- })

просто размножить всё готовое для внутренних табов на уровень выше:

ну и немного изменить селектор для содержимого, чтобы оно не хватало внутренние табы

const as = (where, what) => what.filter(v => where.includes(v)).length;

не слишком «просто»? вопросов, что делает этот код, не будет?

ПЛЮС: код выводит количество букв из what, один только Array.filter() не даст количества вхождений в where букв из what

ПЛЮС2: то самое упрощение, дающее количество вхождений и где одним только Array.filter() не обойтись:

const as = (where, what) => where.split('').filter(v => what.includes(v)).length;

куда копать?

в дебагер, т.к. ошибка о недостатке fancybox там видна невооруженным взглядом, из-за чего и падает весь остальной скрипт, который должен сворачивать меню

а вот о причине сего я догадываюсь, но с таким гонором в комментариях к вопросу, оставлю всё же разгадку сей проблемы за ТС, указав, однако, что нужно смотреть на количество в штуках подключаемых jQuery и блокировку смешанного контента

потому что Number.toFixed() на удивление возвращает строку, для строки нужно что-то типа .replace('.', ',')

ПЛЮС: ну или сношения с Math.round() и потом .toLocaleString()
да и .toLocaleString() использует локаль браузера, которая не всегда бывает нужная, да ещё и вставит пробелы или запятые между разрядами
уж если нужен конкретный формат, то ЕМНИП .toLocaleString() принимает локаль в качестве параметра

не понимаю зачем такие сложности, если теоретически можно заставить grid делать всё самостоятельно


понятно, этот пример ещё нужно доработать напильником, но основная мысль, думаю, ясна

если хочется страдать вручную, тогда крайне примерно алгоритм вижу так:
1) делаем ассоциативный массив, который будет содержать время => [ количество-блоков, есть-переходящие, ]
2) проходимся по всем блокам и заполняем массив, в том числе переходящими значениями, т.е. если блок с 10:00 до 11:30, а деление по полчаса, то прибавляем 1 к количество-блоков для 10:00, 10:30 и 11:00, а для 10:30 и 11:00 дополнительно ставим флаг есть-переходящие, возможно дополняя ссылками на данные блока для удобства дальнейшей работы
3) сортируем массив по ключам
4) (наверное самый сложный шаг) проходимся по массиву и берём максимальное значение количество-блоков в сериях !есть-переходящие, есть-переходящие... (т.е. это максимальное значение присваиваем всей серии)
5) окончательно проходимся по массиву и рисуем блоки опираясь на количество-блоков

а разве что-то типа

JSON.parse('[' + response.replaceAll("}\n{", "},\n{") + ']');

не помогает?

внутри именно объекта никак, т.к. ЕМНИП порядок в JS всегда по ключам
но пройтись по ним в алфавитном порядке всё же можно:

const entries = Object.entries(params);
entries.sort((a, b) => a[1].localeCompare(b[1]));
for (const [ key, value ] of entries) {
    // whatever
}

вариант 1: ИМХО самый оптимальный (но криво работает с прозрачным текстом)


вариант 2: доработка напильником ответа Как в шрифте pacifico сделать при бордере, чтобы не было линий при пересечении букв?, если нужно больше контроля над обводкой

лишний visibility: hidden;

Как заставить работать метод sleep внутри конструктора?

никак, конструктор ЕМНИП не может быть async
но можно сделать async метод create и его вызывать в конструкторе, объект при этом понятное дело создастся, а промис от create можно положить в свойство, чтобы можно было его await снаружи

объявление хоть и считается "old-fashioned", но должно работать (ПС2), использование нормальное, но я бы сделал современный вариант:

var rMyEvent = new CustomEvent('appTabsGroupOpen', { detail: { rElem: 'DDDDD', }, });
document.dispatchEvent(rMyEvent);

а вот jQuery не факт, что работает с событиями из первого блока, т.е. работающим вариантом должно быть

document.addEventListener('appTabsGroupOpen', e => { console.log('Событие ' + e.detail.rElem); });

ПС. ловить событие стоит после добавления обработчика, до этого они уйдут в никуда
ПС2. да, с имеющим кодом обращение должно быть e.detail.detail.rElem