hart-estate-widget 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +123 -106
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,147 +1,164 @@
1
- # Компонент HART Estate Widget
1
+ # HART Estate Widget Component
2
2
 
3
+ ## Prerequisites
3
4
 
4
- ## Способ установки с помощью NPM:
5
+ ![node: 16.13.1](https://img.shields.io/badge/nodeJS-16.13.1-blue)
6
+
7
+ ## Installation using NPM:
5
8
 
6
9
  `npm install hart-estate-widget --save`
7
10
 
8
- ## Пример использования:
11
+ ## Usage example:
12
+
13
+ ### HTML
14
+ ```html
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="utf-8">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
19
+ <title>katmosfera</title>
20
+ <link rel="icon" href="./assets/img/logo.png">
21
+ <script src="./js/index.js" type="module"></script>
22
+ </head>
23
+
24
+ <body>
25
+ <section class="widget-section">
26
+ <div class="widget" id="widget"></div> <!--must match the first attribute in 'new Widget('#widget', options);' -->
27
+ </section>
28
+ </body>
29
+ </html>
30
+ ```
9
31
 
32
+ ### JS
10
33
  ```js
11
- import React, { useEffect, useState } from 'react';
12
- import { Widget, rotationModes } from 'hart-estate-widget';
13
- // либо
14
- import 'hart-estate-widget/build/widget.bundle.js'; // в таком случае создается глобальная переменная WidgetLibrary
15
-
16
- const WIDGET_OPTIONS = {
17
- tabs: ['planImage', 'rotation', 'panorama'],
18
- logo: '/path/to/logo.png',
19
- planImage: '/path/to/plan.jpg',
20
- rotationMode: rotationModes.DEFAULY,
21
- rotationData: {
22
- type: 'top_down',
23
- items: [
24
- '/path/to/rotation_image_1.jpg',
25
- ...
26
- '/path/to/rotation_image_5.jpg',
27
- ],
28
- },
29
- panoramaData: {
30
- type: 'sphere',
31
- items: [
32
- {
33
- camera_id: '1234',
34
- images: ['/path/to/panorama_image.jpg'],
35
- room_id: '1234',
36
- },
37
- ],
38
- },
39
- };
40
-
41
- const App = () => {
42
- const [widget, setWidget] = useState(null);
43
-
44
- useEffect(() => {
45
- const createdWidget = new Widget('#widget-container', WIDGET_OPTIONS);
46
- setState(createdWidget);
47
- }, []);
48
-
49
- return (
50
- <div>
51
- <div id="widget-container" />
52
- </div>
53
- );
34
+ import { ApiStore, Widget, rotationModes } from 'hart-estate-widget';
35
+ import '../assets/sass/index.sass'; // style
36
+ import logo from '../assets/img/logo.png'; // logo
37
+
38
+ const WIDGET_API_URL = 'https://backend.estate.hart-digital.com';
39
+
40
+ const createWidget = async (logoUrl) => {
41
+ const widgetApiHandler = new ApiStore(WIDGET_API_URL)
42
+
43
+ const searchParams = (new URL(document.location)).searchParams;
44
+ const planId = searchParams.get("id");
45
+
46
+ const planData = await widgetApiHandler.loadWidgetData(planId);
47
+ const options = { // the parameters you need
48
+ ...planData.parsed,
49
+ API_URL: WIDGET_API_URL,
50
+ rotationMode: rotationModes.DEFAULT,
51
+ logo: logo,
52
+ tabs: ['panorama', 'rotation'],
53
+ locale: 'en',
54
+ logoUrl,
55
+ }
56
+
57
+ new Widget('#widget', options); // must match the element id
54
58
  }
55
59
 
56
- export App;
60
+ createWidget('https://yoursite/'); // create a widget
61
+ ```
57
62
 
63
+ ## Functionality check:
64
+
65
+ ### Instalization
66
+ 1. `npm install sass@1.62.1`
67
+ 2. `npm install parcel@2.8.3`
68
+ 3. `npm install @parcel/transformer-sass@2.8.3`
69
+
70
+ ### Add files
71
+ 4. add index.html to the ~/src/index.html using the above described content for HTML
72
+ 5. add index.js to the ~/src/js/index.js using the above described content for JS
73
+ 6. add logo.png to the ~/src/assets/img/logo.png (if the logo is not png then replace all paths to the logo)
74
+ 7. add index.sass to the ~/src/assets/sass/index.sass using:
75
+ ```sass
76
+ *, *:before, *:after
77
+ -webkit-font-smoothing: antialiased
78
+ -moz-osx-font-smoothing: grayscale
79
+ font-family: 'Proxima Nova'
80
+ text-decoration: none
81
+ font-weight: 400
82
+ color: #fff
83
+ outline: none
84
+ padding: 0
85
+ margin: 0
86
+ box-sizing: border-box
87
+ -webkit-box-sizing: border-box
88
+
89
+ body
90
+ width: 100%
91
+ height: 100%
92
+ overflow: hidden
93
+
94
+ .widget-section
95
+ width: 100%
96
+ height: 100%
97
+ .widget
98
+ width: 100%
99
+ height: 100%
58
100
  ```
59
101
 
102
+ ### Run
103
+ 8. `rm -rf dist && npx parcel ./src/index.html`
104
+ 9. open: http://localhost:1234/?id=4c834af9-e08a-4ede-bd53-b231bcae38da
60
105
 
61
- ## Параметры:
62
106
 
107
+ ## Parameters:
63
108
  ```js
64
109
  {
65
- // элементы
66
- tabs: ['rotation', 'panorama'], // включенные элементы
110
+ // elements
111
+ tabs: ['rotation', 'panorama'], // included elements
67
112
 
68
- // логотип
69
- logo: '', // путь к логотипу
70
- logoUrl: '', // ссылка, открывающаяся по клику на логотип
113
+ // logo
114
+ logo: '', // path to logo
115
+ logoUrl: '', // link opened when logo is clicked
71
116
 
72
- // локализация
73
- locale: 'en', // языковой код ISO 639
117
+ // localization
118
+ locale: 'en', // ISO 639 language code
74
119
 
75
- // ширина/высота
120
+ // width/height
76
121
  width: 1920,
77
122
  height: 1080,
78
- resizable: true, // автоматически менять размер виджета под размер контейнера при изменении размеров окна
123
+ resizable: true, // automatically resize the widget to the size of the container when the window is resized
79
124
 
80
- // значения
81
- planImage: '', // путь к изображению планировки (необходимо для панорамного тура)
82
- topViewImage: '', // путь к изображению планировки сверху
83
- rotationMode: 'default', // режим работы изображений планировки
84
- rotationData: {}, // тип изображений и пути к изображениям кругового просмотра (порядок обязателен)
85
- panoramaData: {}, // тип панорамы и пути к изображениям 360°
86
- panoramaFov: 75, // угол обзора камеры в режиме панорманого тура
125
+ // values
126
+ planImage: '', // path to the plan image (required for panoramic tour)
127
+ topViewImage: '', // path to the top view image
128
+ rotationMode: 'default', // mode of operation for plan images
129
+ rotationData: {}, // type of images and paths to circular view images (order is mandatory)
130
+ panoramaData: {}, // type of panorama and paths to 360° images
131
+ panoramaFov: 75, // camera field of view angle for panoramic tour
87
132
 
88
- // цвета
133
+ // colors
89
134
  colors: {
90
- main: '#HEX', // основной цвет кнопок, элементов
91
- mainText: '#HEX', // цвет текста для кнопок, элементов, контрастирующий с основным
135
+ main: '#HEX', // main color of buttons, elements
136
+ mainText: '#HEX', // text color for buttons, elements contrasting with the main color
92
137
  },
93
138
  }
94
139
 
95
140
  ```
96
141
 
97
- ## Типы элементов
142
+ ## Types of elements
98
143
  ```js
99
144
  tabs: [
100
- 'rotation', // изображения кругового просмотра (порядок обязателен)
101
- 'panorama', // изображения 360°
145
+ 'rotation', // circular view images (order is mandatory)
146
+ 'panorama', // 360° images
102
147
  ],
103
148
  rotationMode: [
104
- rotationModes.DEFAULT, // режим просмотра вида сверху (несколько ракурсов) и стилизованной планировки
105
- rotationModes.THREESIXTY, // режим прокрутки изображений кругового просмотра
149
+ rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
150
+ rotationModes.THREESIXTY, // image scrolling mode for circular view
106
151
  ],
107
152
  rotationData.type: [
108
- 'top_down', // полная модель
109
- 'middle_cut', // модеь со срезом посередине
153
+ 'top_down', // full model
154
+ 'middle_cut', // model with cut in the middle
110
155
  ],
111
156
  panoramaData.type: [
112
- 'sphere', // панорама с изображениями 360°
113
- 'cube', // панорама с 6 изображениями (top, down, left, right, front, back)
157
+ 'sphere', // 360° panorama
158
+ 'cube', // panorama with 6 images (top, down, left, right, front, back)
114
159
  ],
115
160
  locale: [
116
- 'ru', // русский язык
117
- 'en', // английский язык
161
+ 'ru', // Russian language
162
+ 'en', // English language
118
163
  ],
119
164
  ```
120
-
121
-
122
- ## Публикация с помощью Nexus Registry NPM
123
- ```js
124
- // in @hart-estate/widget package.json:
125
- "publishConfig": {
126
- "registry": "https://nexus.myhart.ru/repository/npm/"
127
- },
128
- ```
129
- `npm adduser --auth-type=legacy --registry=https://nexus.myhart.ru/repository/npm/`
130
- `npm install`
131
- `npm run build`
132
- `npm publish`
133
-
134
-
135
- ## Способ установки с помощью Nexus Registry NPM:
136
-
137
- `npm adduser --auth-type=legacy --registry=https://nexus.myhart.ru/repository/npm/`
138
-
139
- ```js
140
- // when reinstalling (updating), delete node_modules and package-lock.json
141
- // add .npmrc in root:
142
- @hart-estate/widget:registry=https://nexus.myhart.ru/repository/npm/
143
- registry=https://registry.npmjs.org/
144
- ```
145
-
146
- `npm config set @hart-estate:registry https://nexus.myhart.ru/repository/npm/`
147
- `npm install`
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "sideEffects": [
11
11
  "*.sass"
12
12
  ],
13
- "version": "1.1.3",
13
+ "version": "1.1.5",
14
14
  "private": false,
15
15
  "main": "build/widget.module.js",
16
16
  "module": "build/widget.module.js",