hart-estate-widget 0.0.6 → 0.0.7

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 (10) hide show
  1. package/build/{Application.js → components/Application.js} +6 -6
  2. package/build/components/RotationTab.js +1 -1
  3. package/build/{Widget.js → components/Widget.js} +5 -10
  4. package/build/{defaultConfig.js → config/defaultConfig.js} +0 -0
  5. package/build/index.css +245 -0
  6. package/build/index.css.map +1 -0
  7. package/build/index.js +39 -5
  8. package/build/{lib/threesixty → threesixty}/events.js +0 -0
  9. package/build/{lib/threesixty → threesixty}/index.js +0 -0
  10. package/package.json +12 -11
package/build/{Application.js → components/Application.js} RENAMED
@@ -11,17 +11,17 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _mobxReactLite = require("mobx-react-lite");
13
13
 
14
- var _store = _interopRequireDefault(require("./store"));
14
+ var _store = _interopRequireDefault(require("../store"));
15
15
 
16
- var _TabPanes = _interopRequireDefault(require("./components/TabPanes"));
16
+ var _TabPanes = _interopRequireDefault(require("./TabPanes"));
17
17
 
18
- var _ImageTab = _interopRequireDefault(require("./components/ImageTab"));
18
+ var _ImageTab = _interopRequireDefault(require("./ImageTab"));
19
19
 
20
- var _RotationTab = _interopRequireDefault(require("./components/RotationTab"));
20
+ var _RotationTab = _interopRequireDefault(require("./RotationTab"));
21
21
 
22
- var _TabWrapper = _interopRequireDefault(require("./components/TabWrapper"));
22
+ var _TabWrapper = _interopRequireDefault(require("./TabWrapper"));
23
23
 
24
- var _D = _interopRequireDefault(require("./assets/img/3D.jpg"));
24
+ var _D = _interopRequireDefault(require("../assets/img/3D.jpg"));
25
25
 
26
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
27
 
package/build/components/RotationTab.js CHANGED
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _panzoom = _interopRequireDefault(require("panzoom"));
13
13
 
14
- var _threesixty = _interopRequireDefault(require("../lib/threesixty"));
14
+ var _threesixty = _interopRequireDefault(require("../threesixty"));
15
15
 
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
 
package/build/{Widget.js → components/Widget.js} RENAMED
@@ -11,24 +11,19 @@ var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _reactDom = _interopRequireDefault(require("react-dom"));
13
13
 
14
- var _store = _interopRequireDefault(require("./store"));
14
+ var _store = _interopRequireDefault(require("../store"));
15
15
 
16
16
  var _Application = _interopRequireDefault(require("./Application"));
17
17
 
18
- var _defaultConfig = _interopRequireDefault(require("./defaultConfig"));
19
-
20
- require("./assets/sass/index.sass");
18
+ var _defaultConfig = _interopRequireDefault(require("../config/defaultConfig"));
21
19
 
22
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
21
 
24
22
  class Widget {
25
- constructor() {
26
- let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
23
+ constructor(container) {
24
+ let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
27
25
  const config = Object.assign(_defaultConfig.default, options);
28
- const {
29
- container
30
- } = config;
31
- const widgetContainer = document.getElementById(container);
26
+ const widgetContainer = document.querySelector(container);
32
27
  if (!widgetContainer) throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043D\u0430\u0439\u0442\u0438 \u044D\u043B\u0435\u043C\u0435\u043D\u0442: #".concat(container));
33
28
  config.containerElement = widgetContainer;
34
29
 
package/build/index.css ADDED
@@ -0,0 +1,245 @@
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 */
package/build/index.css.map ADDED
@@ -0,0 +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"}
package/build/index.js CHANGED
@@ -3,13 +3,47 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ Object.defineProperty(exports, "ImageTab", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _ImageTab.ImageTab;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "Instructions", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Instructions.Instructions;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "RotationTab", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _RotationTab.RotationTab;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "TabWrapper", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _TabWrapper.TabWrapper;
28
+ }
29
+ });
30
+ Object.defineProperty(exports, "Widget", {
31
+ enumerable: true,
32
+ get: function get() {
33
+ return _Widget.default;
34
+ }
35
+ });
7
36
 
8
37
  var _react = _interopRequireDefault(require("react"));
9
38
 
10
- var _Widget = _interopRequireDefault(require("./Widget"));
39
+ var _Widget = _interopRequireDefault(require("./components/Widget"));
40
+
41
+ var _ImageTab = require("./components/ImageTab");
42
+
43
+ var _Instructions = require("./components/Instructions");
44
+
45
+ var _RotationTab = require("./components/RotationTab");
11
46
 
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
47
+ var _TabWrapper = require("./components/TabWrapper");
13
48
 
14
- var _default = _Widget.default;
15
- exports.default = _default;
49
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
package/build/{lib/threesixty → threesixty}/events.js RENAMED
File without changes
package/build/{lib/threesixty → threesixty}/index.js RENAMED
File without changes
package/package.json CHANGED
@@ -2,28 +2,30 @@
2
2
  "name": "hart-estate-widget",
3
3
  "description": "HART Estate widget",
4
4
  "author": "HART",
5
- "keywords": ["react", "hart", "widget", "estate"],
6
- "version": "0.0.6",
5
+ "keywords": [],
6
+ "version": "0.0.7",
7
7
  "private": false,
8
8
  "main": "build/index.js",
9
9
  "module": "build/index.js",
10
- "files": [ "build", "README.md" ],
10
+ "files": [
11
+ "build",
12
+ "README.md"
13
+ ],
11
14
  "repository": {
12
- "type": "git",
13
- "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
15
+ "type": "git",
16
+ "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
14
17
  },
15
18
  "scripts": {
16
- "start": "node scripts/start.js",
17
- "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files"
19
+ "start": "babel src --watch --out-dir build && npm run build:sass",
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"
18
22
  },
19
23
  "dependencies": {
20
- "@babel/polyfill": "^7.12.1",
21
24
  "mobx": "^6.3.13",
22
25
  "mobx-react-lite": "^3.2.3",
23
26
  "panzoom": "^9.4.2",
24
27
  "react": "^17.0.2",
25
- "react-dom": "^17.0.2",
26
- "react-scripts": "^5.0.0"
28
+ "react-dom": "^17.0.2"
27
29
  },
28
30
  "devDependencies": {
29
31
  "@babel/cli": "^7.17.0",
@@ -33,7 +35,6 @@
33
35
  "eslint": "^8.0.0",
34
36
  "eslint-config-react-app": "^7.0.0",
35
37
  "eslint-plugin-react": "^7.28.0",
36
- "rewire": "^6.0.0",
37
38
  "sass": "^1.46.0"
38
39
  },
39
40
  "browserslist": {