hart-estate-widget 1.1.5 → 2.0.3

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 (6) hide show
  1. package/README.md +170 -164
  2. package/package.json +66 -66
  3. package/build/widget.bundle.js +0 -2
  4. package/build/widget.bundle.js.LICENSE.txt +0 -43
  5. package/build/widget.module.js +0 -2
  6. package/build/widget.module.js.LICENSE.txt +0 -43
package/README.md CHANGED
@@ -1,164 +1,170 @@
1
- # HART Estate Widget Component
2
-
3
- ## Prerequisites
4
-
5
- ![node: 16.13.1](https://img.shields.io/badge/nodeJS-16.13.1-blue)
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)).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
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
- ### Run
103
- 8. `rm -rf dist && npx parcel ./src/index.html`
104
- 9. open: http://localhost:1234/?id=4c834af9-e08a-4ede-bd53-b231bcae38da
105
-
106
-
107
- ## Parameters:
108
- ```js
109
- {
110
- // elements
111
- tabs: ['rotation', 'panorama'], // included elements
112
-
113
- // logo
114
- logo: '', // path to logo
115
- logoUrl: '', // link opened when logo is clicked
116
-
117
- // localization
118
- locale: 'en', // ISO 639 language code
119
-
120
- // width/height
121
- width: 1920,
122
- height: 1080,
123
- resizable: true, // automatically resize the widget to the size of the container when the window is resized
124
-
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
132
-
133
- // colors
134
- colors: {
135
- main: '#HEX', // main color of buttons, elements
136
- mainText: '#HEX', // text color for buttons, elements contrasting with the main color
137
- },
138
- }
139
-
140
- ```
141
-
142
- ## Types of elements
143
- ```js
144
- tabs: [
145
- 'rotation', // circular view images (order is mandatory)
146
- 'panorama', // 360° images
147
- ],
148
- rotationMode: [
149
- rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
150
- rotationModes.THREESIXTY, // image scrolling mode for circular view
151
- ],
152
- rotationData.type: [
153
- 'top_down', // full model
154
- 'middle_cut', // model with cut in the middle
155
- ],
156
- panoramaData.type: [
157
- 'sphere', // 360° panorama
158
- 'cube', // panorama with 6 images (top, down, left, right, front, back)
159
- ],
160
- locale: [
161
- 'ru', // Russian language
162
- 'en', // English language
163
- ],
164
- ```
1
+ # HART Estate Widget Component
2
+
3
+ ## Prerequisites
4
+
5
+ ![node: 16.13.1](https://img.shields.io/badge/nodeJS-16.13.1-blue)
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
+ ```
package/package.json CHANGED
@@ -1,66 +1,66 @@
1
- {
2
- "name": "hart-estate-widget",
3
- "description": "HART Estate widget",
4
- "author": "HART",
5
- "keywords": [
6
- "estate",
7
- "widget",
8
- "hart"
9
- ],
10
- "sideEffects": [
11
- "*.sass"
12
- ],
13
- "version": "1.1.5",
14
- "private": false,
15
- "main": "build/widget.module.js",
16
- "module": "build/widget.module.js",
17
- "files": [
18
- "build",
19
- "README.md"
20
- ],
21
- "engines": {
22
- "node": "^16.13.1"
23
- },
24
- "scripts": {
25
- "cleanup": "rm -rf build",
26
- "start": "npm run cleanup && webpack-dev-server --config webpack-development.config.js",
27
- "build": "npm run cleanup && webpack --config webpack-production.config.js",
28
- "local-tunnel": "Lt --port 9000 --subdomain estate-widget --local-host localhost"
29
- },
30
- "devDependencies": {
31
- "@babel/core": "^7.17.0",
32
- "@babel/eslint-parser": "^7.16.3",
33
- "@babel/plugin-proposal-class-properties": "^7.18.6",
34
- "@babel/plugin-syntax-dynamic-import": "^7.8.3",
35
- "@babel/preset-env": "^7.16.11",
36
- "@babel/preset-react": "^7.18.6",
37
- "babel-loader": "^8.2.5",
38
- "css-loader": "^6.6.0",
39
- "eslint": "^8.0.0",
40
- "eslint-config-react-app": "^7.0.0",
41
- "eslint-plugin-react": "^7.28.0",
42
- "path": "^0.12.7",
43
- "sass": "^1.46.0",
44
- "sass-loader": "^12.4.0",
45
- "style-loader": "^3.3.1",
46
- "webpack": "^5.74.0",
47
- "webpack-cli": "^4.10.0",
48
- "webpack-dev-server": "^4.7.4",
49
- "@fontsource/roboto-mono": "^4.5.8",
50
- "geometric": "^2.2.10",
51
- "mobx": "^6.3.13",
52
- "mobx-react-lite": "^3.2.3",
53
- "panolens": "^0.12.1",
54
- "panzoom": "^9.4.2",
55
- "react": "^17.0.2",
56
- "react-dom": "^17.0.2",
57
- "react-select": "^5.7.2",
58
- "screenfull": "^6.0.1",
59
- "ua-parser-js": "^1.0.2"
60
- },
61
- "browserslist": [
62
- ">0.2%",
63
- "not dead",
64
- "not op_mini all"
65
- ]
66
- }
1
+ {
2
+ "name": "hart-estate-widget",
3
+ "description": "HART Estate widget",
4
+ "author": "HART",
5
+ "keywords": [
6
+ "estate",
7
+ "widget",
8
+ "hart"
9
+ ],
10
+ "sideEffects": [
11
+ "*.sass"
12
+ ],
13
+ "version": "2.0.3",
14
+ "private": false,
15
+ "main": "build/widget.module.js",
16
+ "module": "build/widget.module.js",
17
+ "files": [
18
+ "build",
19
+ "README.md"
20
+ ],
21
+ "scripts": {
22
+ "cleanup": "rm -rf build",
23
+ "start": "npm run cleanup && webpack-dev-server --config webpack-development.config.js",
24
+ "build": "npm run cleanup && webpack --config webpack-production.config.js",
25
+ "local-tunnel": "Lt --port 9000 --subdomain estate-widget --local-host localhost"
26
+ },
27
+ "devDependencies": {
28
+ "@babel/core": "^7.17.0",
29
+ "@babel/eslint-parser": "^7.16.3",
30
+ "@babel/plugin-proposal-class-properties": "^7.18.6",
31
+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
32
+ "@babel/preset-env": "^7.16.11",
33
+ "@babel/preset-react": "^7.18.6",
34
+ "babel-loader": "^8.2.5",
35
+ "camera-controls": "^2.7.3",
36
+ "css-loader": "^6.6.0",
37
+ "eslint": "^8.0.0",
38
+ "eslint-config-prettier": "^8.5.0",
39
+ "eslint-config-react-app": "^7.0.0",
40
+ "eslint-plugin-prettier": "^5.0.0",
41
+ "eslint-plugin-react": "^7.28.0",
42
+ "path": "^0.12.7",
43
+ "sass": "^1.46.0",
44
+ "sass-loader": "^12.4.0",
45
+ "style-loader": "^3.3.1",
46
+ "three": "^0.158.0",
47
+ "webpack": "^5.74.0",
48
+ "webpack-cli": "^4.10.0",
49
+ "webpack-dev-server": "^4.7.4",
50
+ "@fontsource/roboto-mono": "^4.5.8",
51
+ "geometric": "^2.2.10",
52
+ "mobx": "^6.3.13",
53
+ "mobx-react-lite": "^3.2.3",
54
+ "panzoom": "^9.4.2",
55
+ "react": "^17.0.2",
56
+ "react-dom": "^17.0.2",
57
+ "react-select": "^5.7.2",
58
+ "screenfull": "^6.0.1",
59
+ "ua-parser-js": "^1.0.2"
60
+ },
61
+ "browserslist": [
62
+ ">0.2%",
63
+ "not dead",
64
+ "not op_mini all"
65
+ ]
66
+ }