hart-estate-widget 1.1.4 → 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 +90 -73
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # HART Estate Widget Component
2
2
 
3
+ ## Prerequisites
4
+
5
+ ![node: 16.13.1](https://img.shields.io/badge/nodeJS-16.13.1-blue)
3
6
 
4
7
  ## Installation using NPM:
5
8
 
@@ -7,59 +10,101 @@
7
10
 
8
11
  ## Usage example:
9
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
10
33
  ```js
11
- import React, { useEffect, useState } from 'react';
12
- import { Widget, rotationModes } from 'hart-estate-widget';
13
- // or
14
- import 'hart-estate-widget/build/widget.bundle.js'; // in this case, a global variable WidgetLibrary is created
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
- ## Parameters:
62
106
 
107
+ ## Parameters:
63
108
  ```js
64
109
  {
65
110
  // elements
@@ -117,31 +162,3 @@ locale: [
117
162
  'en', // English language
118
163
  ],
119
164
  ```
120
-
121
-
122
- ## Publishing with 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
- ## Installation using 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.4",
13
+ "version": "1.1.5",
14
14
  "private": false,
15
15
  "main": "build/widget.module.js",
16
16
  "module": "build/widget.module.js",