hart-estate-widget 2.1.1 → 2.1.2
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.
- package/README.md +170 -170
- package/build/widget.bundle.js +1 -1
- package/build/widget.module.js +1 -1
- package/package.json +66 -66
package/README.md
CHANGED
|
@@ -1,170 +1,170 @@
|
|
|
1
|
-
# HART Estate Widget Component
|
|
2
|
-
|
|
3
|
-
## Prerequisites
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## Installation using NPM:
|
|
8
|
-
|
|
9
|
-
`npm install hart-estate-widget --save`
|
|
10
|
-
|
|
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
|
-
```
|
|
31
|
-
|
|
32
|
-
### JS
|
|
33
|
-
```js
|
|
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);
|
|
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
|
-
tabs: ['panorama', 'rotation'],
|
|
52
|
-
locale: 'en',
|
|
53
|
-
logoUrl,
|
|
54
|
-
logo,
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
new Widget('#widget', options); // must match the element id
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
createWidget('https://yoursite/'); // create a widget
|
|
61
|
-
```
|
|
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%
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
### Run
|
|
104
|
-
8. `rm -rf dist && npx parcel ./src/index.html`
|
|
105
|
-
9. open: http://localhost:1234/?id=4c834af9-e08a-4ede-bd53-b231bcae38da
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
## Parameters:
|
|
109
|
-
```js
|
|
110
|
-
{
|
|
111
|
-
// elements
|
|
112
|
-
tabs: ['rotation', 'panorama'], // included elements
|
|
113
|
-
|
|
114
|
-
// logo
|
|
115
|
-
logo: '', // path to logo
|
|
116
|
-
logoUrl: '', // link opened when logo is clicked
|
|
117
|
-
|
|
118
|
-
// localization
|
|
119
|
-
locale: 'en', // ISO 639 language code
|
|
120
|
-
|
|
121
|
-
// width/height
|
|
122
|
-
width: 1920,
|
|
123
|
-
height: 1080,
|
|
124
|
-
resizable: true, // automatically resize the widget to the size of the container when the window is resized
|
|
125
|
-
|
|
126
|
-
// значения
|
|
127
|
-
rotationMode: 'default', // mode of operation for plan images
|
|
128
|
-
panoramaFov: 75, // camera field of view angle for panoramic tour
|
|
129
|
-
floors: [ // array of floors, contains 360° images and panoramic tour data
|
|
130
|
-
{
|
|
131
|
-
original_plan_img: '', // path to the original plan image (required for panoramic tour)
|
|
132
|
-
styled_plan_img: '', // path to the styled plan image (required for panoramic tour)
|
|
133
|
-
top_view_img: '', // path to the top view image
|
|
134
|
-
panorama: '', // type of panorama and paths to 360° images
|
|
135
|
-
rotate: '', // type of images and paths to circular view images (order is mandatory)
|
|
136
|
-
}
|
|
137
|
-
],
|
|
138
|
-
|
|
139
|
-
// colors
|
|
140
|
-
colors: {
|
|
141
|
-
main: '#HEX', // main color of buttons, elements
|
|
142
|
-
mainText: '#HEX', // text color for buttons, elements contrasting with the main color
|
|
143
|
-
},
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
## Types of elements
|
|
149
|
-
```js
|
|
150
|
-
tabs: [
|
|
151
|
-
'rotation', // circular view images (order is mandatory)
|
|
152
|
-
'panorama', // 360° images
|
|
153
|
-
],
|
|
154
|
-
rotationMode: [
|
|
155
|
-
rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
|
|
156
|
-
rotationModes.THREESIXTY, // image scrolling mode for circular view
|
|
157
|
-
],
|
|
158
|
-
floors[0].rotate.type: [
|
|
159
|
-
'top_down', // full model
|
|
160
|
-
'middle_cut', // model with cut in the middle
|
|
161
|
-
],
|
|
162
|
-
floors[0].panorama.type: [
|
|
163
|
-
'sphere', // 360° panorama
|
|
164
|
-
'cube', // panorama with 6 images (top, down, left, right, front, back)
|
|
165
|
-
],
|
|
166
|
-
locale: [
|
|
167
|
-
'ru', // Russian language
|
|
168
|
-
'en', // English language
|
|
169
|
-
],
|
|
170
|
-
```
|
|
1
|
+
# HART Estate Widget Component
|
|
2
|
+
|
|
3
|
+
## Prerequisites
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Installation using NPM:
|
|
8
|
+
|
|
9
|
+
`npm install hart-estate-widget --save`
|
|
10
|
+
|
|
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
|
+
```
|
|
31
|
+
|
|
32
|
+
### JS
|
|
33
|
+
```js
|
|
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);
|
|
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
|
+
tabs: ['panorama', 'rotation'],
|
|
52
|
+
locale: 'en',
|
|
53
|
+
logoUrl,
|
|
54
|
+
logo,
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
new Widget('#widget', options); // must match the element id
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
createWidget('https://yoursite/'); // create a widget
|
|
61
|
+
```
|
|
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%
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
### Run
|
|
104
|
+
8. `rm -rf dist && npx parcel ./src/index.html`
|
|
105
|
+
9. open: http://localhost:1234/?id=4c834af9-e08a-4ede-bd53-b231bcae38da
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
## Parameters:
|
|
109
|
+
```js
|
|
110
|
+
{
|
|
111
|
+
// elements
|
|
112
|
+
tabs: ['rotation', 'panorama'], // included elements
|
|
113
|
+
|
|
114
|
+
// logo
|
|
115
|
+
logo: '', // path to logo
|
|
116
|
+
logoUrl: '', // link opened when logo is clicked
|
|
117
|
+
|
|
118
|
+
// localization
|
|
119
|
+
locale: 'en', // ISO 639 language code
|
|
120
|
+
|
|
121
|
+
// width/height
|
|
122
|
+
width: 1920,
|
|
123
|
+
height: 1080,
|
|
124
|
+
resizable: true, // automatically resize the widget to the size of the container when the window is resized
|
|
125
|
+
|
|
126
|
+
// значения
|
|
127
|
+
rotationMode: 'default', // mode of operation for plan images
|
|
128
|
+
panoramaFov: 75, // camera field of view angle for panoramic tour
|
|
129
|
+
floors: [ // array of floors, contains 360° images and panoramic tour data
|
|
130
|
+
{
|
|
131
|
+
original_plan_img: '', // path to the original plan image (required for panoramic tour)
|
|
132
|
+
styled_plan_img: '', // path to the styled plan image (required for panoramic tour)
|
|
133
|
+
top_view_img: '', // path to the top view image
|
|
134
|
+
panorama: '', // type of panorama and paths to 360° images
|
|
135
|
+
rotate: '', // type of images and paths to circular view images (order is mandatory)
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
|
|
139
|
+
// colors
|
|
140
|
+
colors: {
|
|
141
|
+
main: '#HEX', // main color of buttons, elements
|
|
142
|
+
mainText: '#HEX', // text color for buttons, elements contrasting with the main color
|
|
143
|
+
},
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Types of elements
|
|
149
|
+
```js
|
|
150
|
+
tabs: [
|
|
151
|
+
'rotation', // circular view images (order is mandatory)
|
|
152
|
+
'panorama', // 360° images
|
|
153
|
+
],
|
|
154
|
+
rotationMode: [
|
|
155
|
+
rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
|
|
156
|
+
rotationModes.THREESIXTY, // image scrolling mode for circular view
|
|
157
|
+
],
|
|
158
|
+
floors[0].rotate.type: [
|
|
159
|
+
'top_down', // full model
|
|
160
|
+
'middle_cut', // model with cut in the middle
|
|
161
|
+
],
|
|
162
|
+
floors[0].panorama.type: [
|
|
163
|
+
'sphere', // 360° panorama
|
|
164
|
+
'cube', // panorama with 6 images (top, down, left, right, front, back)
|
|
165
|
+
],
|
|
166
|
+
locale: [
|
|
167
|
+
'ru', // Russian language
|
|
168
|
+
'en', // English language
|
|
169
|
+
],
|
|
170
|
+
```
|