hart-estate-widget 0.0.7 → 0.0.8

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 (4) hide show
  1. package/README.md +23 -4
  2. package/build/index.css +1 -245
  3. package/build/index.css.map +1 -1
  4. package/package.json +5 -4
package/README.md CHANGED
@@ -1,7 +1,26 @@
1
- # Компонент HART Estate
1
+ # Компонент HART Estate Widget
2
2
 
3
- ## Список доступных команд
4
3
 
5
- ### `npm start` - запуск приложения
4
+ ## Способ установки с помощью NPM:
6
5
 
7
- ### `npm run build` - билд приложения
6
+ ### `npm install hart-estate-widget`
7
+
8
+
9
+
10
+ ## Пример использования:
11
+
12
+
13
+ ### `const myWidget = new Widget('#container', options);`
14
+
15
+
16
+ ## Параметры по умолчанию:
17
+
18
+ #### `tabs: ['planImage', 'topView', 'topDownView', 'rotation', 'panorama', 'model']` - Элементы, которые необходимо активировать
19
+ #### `tabPanes: true` - Показывать / Скрывать навигационную панель
20
+ #### `width: null` - Ширина компонента (по умолчанию 100%)
21
+ #### `height: null` - Высота компонента (по умолчанию 100vh)
22
+ #### `planImage: ''` - Путь к изображению планировки
23
+ #### `topView: ''` - Путь к изображению модели сверху
24
+ #### `topDownView: ''` - Путь к изображению модели сверху под углом
25
+ #### `rotationImages: []` - Массив изображений для 360 визуализатора
26
+ #### `panoramaImages: []` - Массив изображений сфер для виртуальной панорамы
package/build/index.css CHANGED
@@ -1,245 +1 @@
1
- *, *:before, *:after {
2
- box-sizing: border-box;
3
- -webkit-box-sizing: border-box;
4
- margin: 0;
5
- padding: 0;
6
- }
7
-
8
- html, body {
9
- font-size: 20px;
10
- }
11
-
12
- .widget-application {
13
- --vh: 100vh;
14
- width: 100%;
15
- height: calc(100 * var(--vh));
16
- overflow: hidden;
17
- position: relative;
18
- z-index: 1;
19
- }
20
- .widget-application *, .widget-application *:before, .widget-application *:after {
21
- font-family: "Lato", sans-serif;
22
- -webkit-font-smoothing: antialiased;
23
- -moz-osx-font-smoothing: grayscale;
24
- outline: none;
25
- font-weight: 400;
26
- text-decoration: none;
27
- }
28
- .widget-application .widget-close {
29
- position: absolute;
30
- display: flex;
31
- align-items: center;
32
- justify-content: center;
33
- z-index: 3;
34
- right: 15px;
35
- top: 15px;
36
- color: #000000;
37
- background-color: #FAD436;
38
- padding: 5px 15px;
39
- border-radius: 10px;
40
- font-size: 0.8rem;
41
- border: none;
42
- cursor: pointer;
43
- }
44
- .widget-application .widget-close:hover {
45
- box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
46
- }
47
-
48
- .widget-application .widget-tab {
49
- width: 100%;
50
- height: 100%;
51
- display: flex;
52
- align-items: center;
53
- justify-content: center;
54
- padding: 60px 30px 125px 30px;
55
- }
56
- @media (max-width: 630px) {
57
- .widget-application .widget-tab {
58
- padding: 60px 15px 90px 15px;
59
- }
60
- }
61
- .widget-application .widget-tab--panes-hidden {
62
- padding: 60px 30px;
63
- }
64
- .widget-application .widget-tab__image {
65
- max-width: 100%;
66
- max-height: 100%;
67
- object-fit: contain;
68
- display: block;
69
- }
70
- .widget-application .widget-tab__threesixty {
71
- width: 100%;
72
- height: 100%;
73
- touch-action: none;
74
- -webkit-touch-action: none;
75
- }
76
- .widget-application .widget-tab__threesixty-container {
77
- width: 100% !important;
78
- height: 100% !important;
79
- position: relative;
80
- cursor: move;
81
- background-image: none !important;
82
- }
83
- .widget-application .widget-tab__threesixty-container img {
84
- position: absolute;
85
- left: 50%;
86
- top: 50%;
87
- transform: translate(-50%, -50%);
88
- max-width: 100%;
89
- max-height: 100%;
90
- object-fit: contain;
91
- user-select: none;
92
- -webkit-user-select: none;
93
- user-drag: none;
94
- -webkit-user-drag: none;
95
- }
96
- .widget-application .widget-tab--panorama .widget-tab__image, .widget-application .widget-tab--model .widget-tab__image {
97
- position: absolute;
98
- z-index: 1;
99
- left: 0;
100
- top: 0;
101
- width: 100%;
102
- height: 100%;
103
- object-fit: cover;
104
- }
105
- .widget-application .widget-tab-panes {
106
- position: absolute;
107
- z-index: 3;
108
- left: 50%;
109
- bottom: 5px;
110
- max-width: 100%;
111
- padding: 0 30px 15px 30px;
112
- transform: translateX(-50%);
113
- display: flex;
114
- align-items: center;
115
- justify-content: flex-start;
116
- overflow-x: auto;
117
- }
118
- @media (max-width: 630px) {
119
- .widget-application .widget-tab-panes {
120
- padding: 0 15px 15px 15px;
121
- }
122
- }
123
- .widget-application .widget-tab-panes .widget-tab-pane {
124
- width: 85px;
125
- height: 85px;
126
- border-radius: 5px;
127
- margin: 0 10px;
128
- background-color: #F4F7F7;
129
- cursor: pointer;
130
- border-width: 3px;
131
- border-style: solid;
132
- border-color: #F4F7F7;
133
- overflow: hidden;
134
- display: flex;
135
- align-items: center;
136
- justify-content: center;
137
- flex: none;
138
- transition: border 0.3s ease;
139
- position: relative;
140
- user-select: none;
141
- -webkit-user-select: none;
142
- user-drag: none;
143
- -webkit-user-drag: none;
144
- }
145
- @media (max-width: 630px) {
146
- .widget-application .widget-tab-panes .widget-tab-pane {
147
- width: 50px;
148
- height: 50px;
149
- margin: 0 5px;
150
- }
151
- }
152
- .widget-application .widget-tab-panes .widget-tab-pane::before {
153
- content: "";
154
- position: absolute;
155
- left: 0;
156
- top: 0;
157
- width: 100%;
158
- height: 100%;
159
- box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.3);
160
- }
161
- .widget-application .widget-tab-panes .widget-tab-pane--active, .widget-application .widget-tab-panes .widget-tab-pane:hover {
162
- border-color: #FAD436;
163
- }
164
- .widget-application .widget-tab-panes .widget-tab-pane__image {
165
- width: 100%;
166
- height: 100%;
167
- object-fit: cover;
168
- object-position: center;
169
- display: block;
170
- }
171
- .widget-application .widget-tab-panes .widget-tab-pane__icon {
172
- width: 16px;
173
- height: 16px;
174
- object-fit: contain;
175
- object-position: center;
176
- display: block;
177
- position: absolute;
178
- left: 10px;
179
- bottom: 8px;
180
- }
181
- @media (max-width: 630px) {
182
- .widget-application .widget-tab-panes .widget-tab-pane__icon {
183
- width: 12px;
184
- height: 12px;
185
- left: 5px;
186
- bottom: 3px;
187
- }
188
- }
189
-
190
- .widget-application .widget-instructions {
191
- position: absolute;
192
- z-index: 2;
193
- left: 0;
194
- top: 0;
195
- width: 100%;
196
- height: 100%;
197
- display: flex;
198
- align-items: center;
199
- justify-content: center;
200
- background-color: rgba(0, 0, 0, 0.3);
201
- }
202
- .widget-application .widget-instructions__content {
203
- display: flex;
204
- flex-direction: column;
205
- align-items: flex-start;
206
- justify-content: flex-start;
207
- background-color: #FFFFFF;
208
- box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
209
- border-radius: 5px;
210
- overflow: hidden;
211
- width: 350px;
212
- }
213
- .widget-application .widget-instructions__head {
214
- width: 100%;
215
- padding: 10px;
216
- border-bottom: 1px solid #d1d1d1;
217
- color: rgba(74, 74, 74, 0.7);
218
- text-align: center;
219
- font-size: 0.8rem;
220
- }
221
- .widget-application .widget-instructions__body {
222
- width: 100%;
223
- padding: 10px;
224
- text-align: center;
225
- font-size: 0.7rem;
226
- }
227
- .widget-application .widget-instructions__body p {
228
- margin: 10px 0;
229
- }
230
- .widget-application .widget-instructions__footer {
231
- width: 100%;
232
- }
233
- .widget-application .widget-instructions__footer button {
234
- width: 100%;
235
- background-color: #FAD436;
236
- font-size: 0.8rem;
237
- font-weight: 500;
238
- text-align: center;
239
- color: #000000;
240
- cursor: pointer;
241
- border: none;
242
- padding: 10px 5px;
243
- }
244
-
245
- /*# sourceMappingURL=index.css.map */
1
+ *,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0}html,body{font-size:20px}.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1}.widget-application *,.widget-application *:before,.widget-application *:after{font-family:"Lato",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;font-weight:400;text-decoration:none}.widget-application .widget-close{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3;right:15px;top:15px;color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px 125px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 15px 90px 15px}}.widget-application .widget-tab--panes-hidden{padding:60px 30px}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;cursor:move;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab--panorama .widget-tab__image,.widget-application .widget-tab--model .widget-tab__image{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:cover}.widget-application .widget-tab-panes{position:absolute;z-index:3;left:50%;bottom:5px;max-width:100%;padding:0 30px 15px 30px;transform:translateX(-50%);display:flex;align-items:center;justify-content:flex-start;overflow-x:auto}@media(max-width: 630px){.widget-application .widget-tab-panes{padding:0 15px 15px 15px}}.widget-application .widget-tab-panes .widget-tab-pane{width:85px;height:85px;border-radius:5px;margin:0 10px;background-color:#f4f7f7;cursor:pointer;border-width:3px;border-style:solid;border-color:#f4f7f7;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;transition:border .3s ease;position:relative;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane{width:50px;height:50px;margin:0 5px}}.widget-application .widget-tab-panes .widget-tab-pane::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 1px 1px 10px rgba(0,0,0,.3)}.widget-application .widget-tab-panes .widget-tab-pane--active,.widget-application .widget-tab-panes .widget-tab-pane:hover{border-color:#fad436}.widget-application .widget-tab-panes .widget-tab-pane__image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.widget-application .widget-tab-panes .widget-tab-pane__icon{width:16px;height:16px;object-fit:contain;object-position:center;display:block;position:absolute;left:10px;bottom:8px}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane__icon{width:12px;height:12px;left:5px;bottom:3px}}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.3)}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:#fff;box-shadow:1px 1px 10px rgba(0,0,0,.5);border-radius:5px;overflow:hidden;width:350px}.widget-application .widget-instructions__head{width:100%;padding:10px;border-bottom:1px solid #d1d1d1;color:rgba(74,74,74,.7);text-align:center;font-size:.8rem}.widget-application .widget-instructions__body{width:100%;padding:10px;text-align:center;font-size:.7rem}.widget-application .widget-instructions__body p{margin:10px 0}.widget-application .widget-instructions__footer{width:100%}.widget-application .widget-instructions__footer button{width:100%;background-color:#fad436;font-size:.8rem;font-weight:500;text-align:center;color:#000;cursor:pointer;border:none;padding:10px 5px}/*# sourceMappingURL=index.css.map */
package/build/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/assets/sass/index.sass","../src/assets/sass/vars.sass","../src/assets/sass/components/tabs.sass","../src/assets/sass/components/instructions.sass"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OC9BI;ED+BJ,kBC7BQ;ED8BR;EACA;EACA;EACA;EACA;;AACA;EACE;;;AEzCJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EAPF;IAQI;;;AACF;EACE;;AACF;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ED1BR;EACA;EACA;EACA;;AC2BI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAZF;IAaI;;;AACF;EACE;EACA;EACA;EACA;EACA,kBD9DM;EC+DN;EACA;EACA;EACA,cDlEM;ECmEN;EACA;EACA;EACA;EACA;EACA;EACA;EDrEJ;EACA;EACA;EACA;;ACoEI;EAlBF;IAmBI;IACA;IACA;;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACF;EAEE,cDxFI;;ACyFN;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EATF;IAUI;IACA;IACA;IACA;;;;ACjHR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA,kBFdE;EEeF;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACJ;EACE;;AACA;EACE;EACA,kBFlCI;EEmCJ;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../src/assets/sass/index.sass","../src/assets/sass/vars.sass","../src/assets/sass/components/tabs.sass","../src/assets/sass/components/instructions.sass"],"names":[],"mappings":"AAEA,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UAEA,+EACE,8BACA,mCACA,kCACA,aACA,gBACA,qBAEF,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MC9BI,KD+BJ,iBC7BQ,QD8BR,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCEzCJ,gCACE,WACA,YACA,aACA,mBACA,uBACA,6BACA,yBAPF,gCAQI,6BACF,8CACE,kBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,sDACE,sBACA,uBACA,kBACA,YACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,mBD1BR,iBACA,yBACA,eACA,uBC2BI,uHACE,kBACA,UACA,OACA,MACA,WACA,YACA,iBAEN,sCACE,kBACA,UACA,SACA,WACA,eACA,yBACA,2BACA,aACA,mBACA,2BACA,gBACA,yBAZF,sCAaI,0BACF,uDACE,WACA,YACA,kBACA,cACA,iBD9DM,QC+DN,eACA,iBACA,mBACA,aDlEM,QCmEN,gBACA,aACA,mBACA,uBACA,UACA,2BACA,kBDrEJ,iBACA,yBACA,eACA,uBCoEI,yBAlBF,uDAmBI,WACA,YACA,cACF,+DACE,WACA,kBACA,OACA,MACA,WACA,YACA,6CACF,4HAEE,aDxFI,QCyFN,8DACE,WACA,YACA,iBACA,uBACA,cACF,6DACE,WACA,YACA,mBACA,uBACA,cACA,kBACA,UACA,WACA,yBATF,6DAUI,WACA,YACA,SACA,YCjHR,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,gCACA,kDACE,aACA,sBACA,uBACA,2BACA,iBFdE,KEeF,uCACA,kBACA,gBACA,YACF,+CACE,WACA,aACA,gCACA,wBACA,kBACA,gBACF,+CACE,WACA,aACA,kBACA,gBACA,iDACE,cACJ,iDACE,WACA,wDACE,WACA,iBFlCI,QEmCJ,gBACA,gBACA,kBACA,WACA,eACA,YACA","file":"index.css"}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "HART Estate widget",
4
4
  "author": "HART",
5
5
  "keywords": [],
6
- "version": "0.0.7",
6
+ "version": "0.0.8",
7
7
  "private": false,
8
8
  "main": "build/index.js",
9
9
  "module": "build/index.js",
@@ -16,16 +16,17 @@
16
16
  "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
17
17
  },
18
18
  "scripts": {
19
- "start": "babel src --watch --out-dir build && npm run build:sass",
19
+ "start": "babel src --watch --out-dir build --copy-files",
20
20
  "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files && npm run build:sass",
21
- "build:sass": "sass src/assets/sass/index.sass:build/index.css"
21
+ "build:sass": "sass src/assets/sass/index.sass:build/index.css --style compressed"
22
22
  },
23
23
  "dependencies": {
24
24
  "mobx": "^6.3.13",
25
25
  "mobx-react-lite": "^3.2.3",
26
26
  "panzoom": "^9.4.2",
27
27
  "react": "^17.0.2",
28
- "react-dom": "^17.0.2"
28
+ "react-dom": "^17.0.2",
29
+ "core-js": "^3.21.0"
29
30
  },
30
31
  "devDependencies": {
31
32
  "@babel/cli": "^7.17.0",