Как перекрыть кнопку закрытия панорамы в полноэкранном режиме?

Question

[zlodiak]

В режиме панорамы если наложить при помощи z-index блок поверх кнопки закрытия панорамы, то на кнопку панорамы невозможно нажать. Это ожидаемо.

Но в режиме полноэкранной панорамы (который устанавливается при помощи этой кнопочки) описанный выше кейс не действует. А хотелось бы чтобы действовал, то есть по-прежнему невозможно было бы нажать на родную иконку закрытия панорамы.

JSFIDDLE

Answer 1

[0xD34F]

Не очень понятно, чего вы пытаетесь добиться. Если невозможности закрытия панорамы - тогда не создавайте кнопку закрытия, при вызове ymaps.panorama.Player можно указать свойство controls, так же как и у карты.

Если же вы хотите, чтобы кнопка была, но ей нельзя было воспользоваться... ну, не знаю, задайте ей pointer-events: none при переходе в полноэкранный режим, например. Или просто скрывайте.

Comments

[zlodiak]

Я пытаюсь заменить иконку закрытия на свою иконку, которая отличается по внешнему виду. В конструкторе Player удалить иконку закрытия не могу так как рядом стоящие элементы сдвинутся вправо и перекроют мою иконку.

Остаётся второй способ - при помощи z-index накрыть родную иконку своей. Однако в этом случае в полноэкранном режиме на неё не получается кликнуть даже если воспользоваться вашим советом про pointer-events. JSFIDDLE

[0xD34F]

zlodiak, а почему бы не назначить другое изображение с помощью css? Как-то так.

[zlodiak]

0xD34F, дело в том, что эта кастомная кнопка уже существует и на неё много завязано. Я пример в фиддле создал сильно урезанный.

Была у меня мысли повесить обработчик на родную кнопку закрытия панорамы, тогда проблема была бы решена потому что её вид я поменял бы при помощи css. Но, судя по документации, у этой кнопки не обработчика

А вот такой код не срабатывает:

const fullScreenClose = myMap.controls.get('closeControl');

    fullScreenClose.events.add('click', () => {
      console.log('11111111111111111111111111111111111111111111');
    });

[0xD34F]

zlodiak, что-то я запутался - то вы пытаетесь иконку заменить, то кастомную кнопку сделать. Возможностей для создания кастомных элементов управления API панорамы не предоставляет (или я чего-то не знаю), так что придётся костылить - как-то так, например.

[zlodiak]

0xD34F, спасибо. Кажется, получилось после небольшой доработки

[0xD34F]

zlodiak, style.marginLeft = '-42px', серьёзно? Если всё-таки хотите, чтобы оригинальной кнопки не было видно - не создавайте её. Укажите controls, и перечислите там нужные вам элементы управления. И так костыль прибиваете - зачем же делать его ещё уродливее?

[zlodiak]

0xD34F, я так пробовал, но если её не создавать, то кнопка полноэкранного режима и название панорамы смещаются вправо. То есть всё равно придётся что-то двигать

[0xD34F]

zlodiak, ну даже и не знаю... перечислил элементы управления - все нормально, ничего никуда не смещается. А вот задавать marginLeft - есть риск, что отступ окажется недостаточным, например в Фаерфоксе у меня кнопка съезжает на новую строку.

[zlodiak]

0xD34F, вы поступили хитро - к созданному элементу добавили класс "ymaps-2-1-68-islets_maps-button", поэтому ничего и не сместилось. очень полезный способ

[0xD34F]

zlodiak, да какое хитро... костыль - он и есть костыль. Главное - не забыть заменить этот класс, когда будете обновлять версию карт.