Photoreport-gl-wc NPM

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

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`

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

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

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

Компонент разделeн на два представления: tile и classic. Шаблоны и стили называются соответственно
В классе компонента используется декоратор @property для описания того, что во Vue.js называется data/props

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

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

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

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

static _attributeNameForProperty (name, options) — функция, чтобы преобразовать data-id, как это принято в HTML, в dataId, как это принято в JavaScript
unsafeHTML — директива отображает содержимое как HTML, а не текст. Соответствует v-html во Vue.js
В файле api.js настраиваются пути, по которым запрашиваются картинки и данные
Настройки webpack взяты с Open Web Components (там уже все обновили)