Разрешить изменение текста часового пояса (особенно в событиях)

Внести вклад Функция
1

Продолжение обсуждения из темы :globe_showing_europe_africa: Новая функция календаря: отображение местного времени:

Наш сайт (или сайты) почти исключительно доступен только для жителей нашей страны.

У нас есть специфическая проблема: название нашего часового пояса совпадает с названием конкретного населённого пункта в нашей стране, что может запутать пользователей, когда оно отображается непосредственно над полем с местоположением:

image
image697×221 16.1 KB

В данном случае (местное) мероприятие проводится в известном местном заведении, находящемся примерно в 1000 км от города Окленд (в другом городе). Указание «(Окленд)» в этом контексте вводит в заблуждение.

В связанной теме уже обсуждался этот вопрос:

Было бы очень полезно иметь возможность скрывать часовой пояс (особенно для мероприятий) на уровне сайта для локальных событий, но я не вижу, как это сделать с помощью CSS, а ask.discourse.com не помогает.

Кроме того, было бы очень удобно сделать локальные события настройкой по умолчанию.

1 лайк
2

Если я правильно понял:

  • Город часового пояса события отображается только если в настройках события включена опция «Показывать местное время».
  • По умолчанию «Показывать местное время» отключено.

image
image586×492 27.5 KB

Получается, у вас есть пользователи, которые включают «Показывать местное время» для событий, а вам это не нужно.

А что, если скрыть настройку «Показывать местное время», чтобы её нельзя было включить?

.event-field.show-local-time {
    display: none;
}

image
image582×376 16 KB

Тогда новые события будут как минимум отображать время и город часового пояса пользователя: событие, созданное во времени Феникса, покажет моё локальное время и «Чикаго».

Я не вижу способа полностью убрать город — это часть готового контента, и это всё ещё может сбивать с толку. Возможно, какой-то JavaScript сможет воздействовать на текст в скобках внутри этого селектора? Лучшее, что я могу придумать с помощью CSS, — это добавить иконку, чтобы побудить нажать на всплывающее окно с часовым поясом:

image

span.discourse-local-date.cooked-date::after {
    content: " ℹ️";
}
3

Спасибо за ваше внимание к этому вопросу и за предложения, Тодд!

Не совсем так — это не проблема. На самом деле не так важно, указано ли местное время или время пользователя (в большинстве случаев они будут совпадать).

Проблема в том, что наш конкретный часовой пояс вводит в заблуждение из-за текста в его названии (это единственный часовой пояс Новой Зеландии). Это касается и вас: в вашем примере выше подразумевается, что событие пройдет в Лайтл-Крик, Чикаго.

Вот к чему я стремлюсь:

image
image667×218 9.53 KB

После того как я немного побился головой об стену «вайб-кодинга», я написал этот фрагмент JavaScript (вставьте его во вкладку JS локального компонента темы), который решает мою задачу:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("swap-auckland-for-nz", (api) => {
  function swapTimezones(root = document) {
    root.querySelectorAll('.relative-time').forEach(elem => {
      if (elem.textContent && elem.textContent.includes('(Auckland)')) {
        elem.textContent = elem.textContent.replace('(Auckland)', '(NZ)');
      }
    });
  }

  api.onPageChange(() => {
    swapTimezones(document);

    // Настройка постоянного наблюдателя за изменениями для динамического вывода событий/календаря
    const observer = new MutationObserver(() => {
      swapTimezones(document);
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Опционально: также запускаем после других событий навигации
    window.addEventListener("hashchange", () => swapTimezones(document));
    window.addEventListener("popstate", () => swapTimezones(document));
  });
});

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

4

Я не знал, что вся Новая Зеландия находится в одном часовом поясе, но к моменту завершения работы у меня сложилось впечатление, что ваша проблема потребует JavaScript. Рад, что вам удалось найти рабочее решение на JS!

1 лайк