# photoreport-gl-wc

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

Latest version **2.2.13** (published 2022-11-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install photoreport-gl-wc
pnpm add photoreport-gl-wc
yarn add photoreport-gl-wc
bun add photoreport-gl-wc
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.13 |
| Published | 2022-11-09 |
| First published | 2020-10-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 24 |
| Unpacked size | 5.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | RG Team |
| Maintainers | rgruteam |
| Keywords | photoreport-gl-wc |

## Links

- npm: https://www.npmjs.com/package/photoreport-gl-wc
- npm.io page: https://npm.io/package/photoreport-gl-wc

## Dependencies (24)

- [eslint](https://npm.io/package/eslint.md) ^5.16.0
- [webpack](https://npm.io/package/webpack.md) ^4.29.6
- [flickity](https://npm.io/package/flickity.md) ^2.2.0
- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8
- [prettier](https://npm.io/package/prettier.md) ^1.16.4
- [http-server](https://npm.io/package/http-server.md) ^0.11.1
- [lit-element](https://npm.io/package/lit-element.md) ^2.1.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.12
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^10.0.1
- [style-loader](https://npm.io/package/style-loader.md) ^0.23.1
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.0.0
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^2.6.1
- [eslint-plugin-html](https://npm.io/package/eslint-plugin-html.md) ^5.0.3
- [eslint-plugin-node](https://npm.io/package/eslint-plugin-node.md) ^8.0.1
- [flickity-as-nav-for](https://npm.io/package/flickity-as-nav-for.md) ^2.0.1
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.16.0
- [eslint-plugin-promise](https://npm.io/package/eslint-plugin-promise.md) ^4.1.1
- [flickity-imagesloaded](https://npm.io/package/flickity-imagesloaded.md) ^2.0.0
- [eslint-config-standard](https://npm.io/package/eslint-config-standard.md) ^12.0.0
- [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) ^3.0.1
- [eslint-plugin-standard](https://npm.io/package/eslint-plugin-standard.md) ^4.0.0
- [@open-wc/building-webpack](https://npm.io/package/@open-wc/building-webpack.md) ^1.1.3
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.4.0
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.4.0

## Recent versions

- 2.2.13 (latest) — 2022-11-09
- 2.2.12 — 2022-10-19
- 2.2.11 — 2022-07-15
- 2.2.10 — 2022-07-01
- 2.2.9 — 2022-06-14
- 2.2.8 — 2022-06-09
- 2.2.7 — 2022-06-09
- 2.2.6 — 2022-05-30
- 2.2.5 — 2022-05-30
- 2.2.4 — 2022-05-18
- 2.2.3 — 2022-05-18
- 2.2.2 — 2022-05-18
- 2.2.1 — 2022-05-18
- 1.1.1 — 2021-08-31
- 1.1.0 — 2021-08-31
- … 11 more at https://npm.io/package/photoreport-gl-wc/versions

## README

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

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

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

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

```html
<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 в соответствии с [документом](https://docs.npmjs.com/about-semantic-versioning)
2. Войти в аккаунт rgruteam на npm (подсказка к паролю - wifi с другой буквой)
3. Опубликовать пакет
4. Обновить версию пакета в репозитории сайта
## Важные особенности при разработке веб-компонента:

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

2. В классе компонента используется [декоратор](https://github.com/tc39/proposal-decorators) **@property** для описания того, что во Vue.js называется data/props

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

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

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

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

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

4. **unsafeHTML** — [директива](https://lit-html.polymer-project.org/guide/template-reference#unsafehtml) отображает содержимое как HTML, а не текст. Соответствует v-html во Vue.js

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

6. Настройки **webpack** взяты с [Open Web Components](https://open-wc.org) (там уже все обновили)

---
_Source: https://npm.io/package/photoreport-gl-wc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._