Джейк и его команда создали этот довольно удивительный пользовательский элемент для управления масштабированием пинча в любом наборе HTML, за исключением собственной динамики масштабирования в браузере (например, масштабирование в мобильной области просмотра). Этот элемент был одним из центральных компонентов, которые нам нужны для приложения squoosh , которое мы создали и выпустили на Chrome Dev Summit (… я говорю «выпущено на Chrome Dev Summit» - Джейк показывал его всем на Китайском дне разработчиков Google). хотя остальная часть команды была под эмбарго;) …)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post .

Я только добавил его в свой блог (это заняло всего пару минут), вы можете проверить это в моем разделе « life », где я делюсь фотографиями, которые я сделал. Если вы работаете на устройстве с сенсорным экраном, вы можете быстро увеличить масштаб элемента, если вы используете трекпад, который может работать с несколькими нажатиями пальцев, что тоже работает.

Этот элемент является отличным примером того, почему я люблю веб-компоненты как модель для создания компонентов пользовательского интерфейса. Элемент pinch-zoom имеет pinch-zoom чуть меньше 3 КБ (без сжатия) и минимальные зависимости для сборки, и он просто отлично справляется с одной работой, не привязывая никакой пользовательской логики уровня приложения, которая затруднит его использование (у меня есть некоторые мысли по поводу логики пользовательского интерфейса) против компонентов логики приложения, которыми я поделюсь на основе своих знаний из приложения Squoosh).

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