Компонент фоторепортажей

data-id (обязательный атрибут) — id фоторепортажа. Можно посмотреть в редактуре data-description — описание фоторепортажа. Перезаписывает описание, выставленное в редактуре data-main-photo — первая фотография в фоторепортаже data-tile — отображение в виде плитки с открытием в полноэкранном режиме. По умолчанию галерея имеет классический вид data-title — название фоторепортажа. Перезаписывает название, выставленное в редактуре data-url — единый указатель ресурса

*префикс data ставится потому что без него это были бы нестандартные атрибуты HTML. Так делает Google

Пример использования:

<rg-photoreport
  data-id="41498"
  data-description="Итераторы, генераторы, обещания и async/await"
  data-main-photo="506348"
  data-tile
  data-title="Новый компонент фоторепортажей"
  data-url="/2020/07/07/90-let-so-dnya-smerti-syera-artura-konan-doyla"
></rg-photoreport

Для запуска в режиме разработки выполнить (для РГ):

npm run dev

Для запуска в режиме разработки, совместимом c IE11, выполнить (для РГ):

npm run dev-legacy

Для ГЛ соответствующие команды, но с префиксом gl.

npm run dev-gl и npm run dev-gl-legacy

Чтобы собрать билд для публикации в npm, выполнить команду. В этот момент из webpack.prod.js соберется 8 вида файлов, которые мы сами будем использовать как хотим, загрузив пакет в проект.

npm run build

Порядок выноса изменений:

1. Поменять версию пакета в package.json в соответствии с документом
2. Войти в аккаунт rgruteam на npm (подсказка к паролю - wifi с другой буквой)
3. Опубликовать пакет
4. Обновить версию пакета в репозитории сайта

Важные особенности при разработке веб-компонента:

1. Компонент разделeн на два представления: tile и classic. Шаблоны и стили называются соответственно

2. В классе компонента используется декоратор @property для описания того, что во Vue.js называется data/props

@property({ type: Number }) dataId = 7557

то же самое, что и

static get properties () {
  return {
    dataId: { type: Number }
  }
}

constructor () {
  super()
  this.dataId = 7557
}

3. static _attributeNameForProperty (name, options) — функция, чтобы преобразовать data-id, как это принято в HTML, в dataId, как это принято в JavaScript

4. unsafeHTML — директива отображает содержимое как HTML, а не текст. Соответствует v-html во Vue.js

5. В файле api.js настраиваются пути, по которым запрашиваются картинки и данные

6. Настройки webpack взяты с Open Web Components (там уже все обновили)