hart-estate-widget 1.0.0

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 (20) hide show
  1. package/README.md +7 -0
  2. package/build/Application.js +107 -0
  3. package/build/Widget.js +44 -0
  4. package/build/assets/img/3D.jpg +0 -0
  5. package/build/assets/img/refresh-icon.svg +6 -0
  6. package/build/assets/sass/components/instructions.sass +50 -0
  7. package/build/assets/sass/components/tabs.sass +117 -0
  8. package/build/assets/sass/index.sass +45 -0
  9. package/build/assets/sass/vars.sass +15 -0
  10. package/build/components/ImageTab.js +20 -0
  11. package/build/components/Instructions.js +33 -0
  12. package/build/components/RotationTab.js +66 -0
  13. package/build/components/TabPanes.js +90 -0
  14. package/build/components/TabWrapper.js +38 -0
  15. package/build/defaultConfig.js +20 -0
  16. package/build/index.js +13 -0
  17. package/build/lib/threesixty/events.js +193 -0
  18. package/build/lib/threesixty/index.js +236 -0
  19. package/build/store/index.js +31 -0
  20. package/package.json +61 -0
package/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # Компонент HART Estate
2
+
3
+ ## Список доступных команд
4
+
5
+ ### `npm start` - запуск приложения
6
+
7
+ ### `npm run build` - билд приложения
package/build/Application.js ADDED
@@ -0,0 +1,107 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+
10
+ var _react = require("react");
11
+
12
+ var _mobxReactLite = require("mobx-react-lite");
13
+
14
+ var _store = _interopRequireDefault(require("store"));
15
+
16
+ var _TabPanes = _interopRequireDefault(require("components/TabPanes"));
17
+
18
+ var _ImageTab = _interopRequireDefault(require("components/ImageTab"));
19
+
20
+ var _RotationTab = _interopRequireDefault(require("components/RotationTab"));
21
+
22
+ var _TabWrapper = _interopRequireDefault(require("components/TabWrapper"));
23
+
24
+ var _D = _interopRequireDefault(require("assets/img/3D.jpg"));
25
+
26
+ var _react2 = require("react/cjs/react.development");
27
+
28
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
+
30
+ const Application = (0, _mobxReactLite.observer)(_ref => {
31
+ let {
32
+ width,
33
+ height
34
+ } = _ref;
35
+ const {
36
+ config
37
+ } = _store.default;
38
+ const [currentTab, setCurrentTab] = (0, _react.useState)(config.tabs[0]);
39
+ const [isTabPanesVisible, setTabPanesState] = (0, _react.useState)(true);
40
+
41
+ const showTabPanes = () => setTabPanesState(true);
42
+
43
+ const hideTabPanes = () => setTabPanesState(false);
44
+
45
+ const tabsList = {
46
+ 'planImage': /*#__PURE__*/React.createElement(_ImageTab.default, {
47
+ image: config.planImage
48
+ }),
49
+ 'topView': /*#__PURE__*/React.createElement(_ImageTab.default, {
50
+ image: config.topView
51
+ }),
52
+ 'topDownView': /*#__PURE__*/React.createElement(_ImageTab.default, {
53
+ image: config.topDownView
54
+ }),
55
+ 'rotation': /*#__PURE__*/React.createElement(_TabWrapper.default, {
56
+ isActive: !isTabPanesVisible,
57
+ image: config.rotationImages[0],
58
+ title: "360\xB0 overview",
59
+ text: ['Use mouse to rotate', 'Shift + LMB to move'],
60
+ onStart: hideTabPanes
61
+ }, /*#__PURE__*/React.createElement(_RotationTab.default, {
62
+ images: config.rotationImages
63
+ })),
64
+ 'panorama': /*#__PURE__*/React.createElement(_TabWrapper.default, {
65
+ isActive: !isTabPanesVisible,
66
+ image: config.panoramaImages[0],
67
+ title: "Panoramic tour",
68
+ text: ['Use mouse to rotate', 'To move through the rooms, click on the layout thumbnail'],
69
+ onStart: hideTabPanes
70
+ }, /*#__PURE__*/React.createElement("p", null, "Work in progress")),
71
+ 'model': /*#__PURE__*/React.createElement(_TabWrapper.default, {
72
+ isActive: !isTabPanesVisible,
73
+ image: _D.default,
74
+ title: "3D Model",
75
+ text: ['Use mouse to rotate', 'Use the right mouse button to move'],
76
+ onStart: hideTabPanes
77
+ }, /*#__PURE__*/React.createElement("p", null, "Work in progress"))
78
+ };
79
+ const appStyle = {
80
+ width,
81
+ height
82
+ };
83
+
84
+ const setWindowHeight = () => {
85
+ document.querySelector('.widget-application').style.setProperty('--vh', window.innerHeight / 100 + 'px');
86
+ };
87
+
88
+ (0, _react2.useEffect)(() => {
89
+ window.addEventListener('resize', setWindowHeight);
90
+ setWindowHeight();
91
+ }, []);
92
+ return /*#__PURE__*/React.createElement("main", {
93
+ className: "widget-application",
94
+ style: appStyle
95
+ }, /*#__PURE__*/React.createElement("section", {
96
+ className: "widget-tab widget-tab--".concat(currentTab, " widget-tab--panes-").concat(config.tabPanes ? 'visible' : 'hidden')
97
+ }, tabsList[currentTab]), config.tabPanes && isTabPanesVisible && /*#__PURE__*/React.createElement(_TabPanes.default, {
98
+ currentTab: currentTab,
99
+ setCurrentTab: setCurrentTab
100
+ }), config.tabPanes && !isTabPanesVisible && /*#__PURE__*/React.createElement("button", {
101
+ type: "button",
102
+ className: "widget-close",
103
+ onClick: showTabPanes
104
+ }, "Exit"));
105
+ });
106
+ var _default = Application;
107
+ exports.default = _default;
package/build/Widget.js ADDED
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/es.object.assign.js");
9
+
10
+ var _reactDom = _interopRequireDefault(require("react-dom"));
11
+
12
+ var _store = _interopRequireDefault(require("store"));
13
+
14
+ var _Application = _interopRequireDefault(require("Application"));
15
+
16
+ var _defaultConfig = _interopRequireDefault(require("defaultConfig"));
17
+
18
+ require("assets/sass/index.sass");
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
22
+ class Widget {
23
+ constructor() {
24
+ let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
25
+ const config = Object.assign(_defaultConfig.default, options);
26
+ const {
27
+ container
28
+ } = config;
29
+ const widgetContainer = document.getElementById(container);
30
+ 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));
31
+ config.containerElement = widgetContainer;
32
+
33
+ _store.default.setConfig(config);
34
+
35
+ _reactDom.default.render( /*#__PURE__*/React.createElement(_Application.default, {
36
+ width: config.width,
37
+ height: config.height
38
+ }), widgetContainer);
39
+ }
40
+
41
+ }
42
+
43
+ var _default = Widget;
44
+ exports.default = _default;
package/build/assets/img/3D.jpg ADDED
Binary file
package/build/assets/img/refresh-icon.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 438.529 438.528">
2
+ <g>
3
+ <path d="M433.109,23.694c-3.614-3.612-7.898-5.424-12.848-5.424c-4.948,0-9.226,1.812-12.847,5.424l-37.113,36.835 c-20.365-19.226-43.684-34.123-69.948-44.684C274.091,5.283,247.056,0.003,219.266,0.003c-52.344,0-98.022,15.843-137.042,47.536 C43.203,79.228,17.509,120.574,5.137,171.587v1.997c0,2.474,0.903,4.617,2.712,6.423c1.809,1.809,3.949,2.712,6.423,2.712h56.814 c4.189,0,7.042-2.19,8.566-6.565c7.993-19.032,13.035-30.166,15.131-33.403c13.322-21.698,31.023-38.734,53.103-51.106 c22.082-12.371,45.873-18.559,71.376-18.559c38.261,0,71.473,13.039,99.645,39.115l-39.406,39.397 c-3.607,3.617-5.421,7.902-5.421,12.851c0,4.948,1.813,9.231,5.421,12.847c3.621,3.617,7.905,5.424,12.854,5.424h127.906 c4.949,0,9.233-1.807,12.848-5.424c3.613-3.616,5.42-7.898,5.42-12.847V36.542C438.529,31.593,436.733,27.312,433.109,23.694z" fill="#FAD436"></path>
4
+ <path d="M422.253,255.813h-54.816c-4.188,0-7.043,2.187-8.562,6.566c-7.99,19.034-13.038,30.163-15.129,33.4 c-13.326,21.693-31.028,38.735-53.102,51.106c-22.083,12.375-45.874,18.556-71.378,18.556c-18.461,0-36.259-3.423-53.387-10.273 c-17.13-6.858-32.454-16.567-45.966-29.13l39.115-39.112c3.615-3.613,5.424-7.901,5.424-12.847c0-4.948-1.809-9.236-5.424-12.847 c-3.617-3.62-7.898-5.431-12.847-5.431H18.274c-4.952,0-9.235,1.811-12.851,5.431C1.807,264.844,0,269.132,0,274.08v127.907 c0,4.945,1.807,9.232,5.424,12.847c3.619,3.61,7.902,5.428,12.851,5.428c4.948,0,9.229-1.817,12.847-5.428l36.829-36.833 c20.367,19.41,43.542,34.355,69.523,44.823c25.981,10.472,52.866,15.701,80.653,15.701c52.155,0,97.643-15.845,136.471-47.534 c38.828-31.688,64.333-73.042,76.52-124.05c0.191-0.38,0.281-1.047,0.281-1.995c0-2.478-0.907-4.612-2.715-6.427 C426.874,256.72,424.731,255.813,422.253,255.813z" fill="#FAD436"></path>
5
+ </g>
6
+ </svg>
package/build/assets/sass/components/instructions.sass ADDED
@@ -0,0 +1,50 @@
1
+ @import '../vars'
2
+
3
+ .widget-application
4
+ .widget-instructions
5
+ position: absolute
6
+ z-index: 2
7
+ left: 0
8
+ top: 0
9
+ width: 100%
10
+ height: 100%
11
+ display: flex
12
+ align-items: center
13
+ justify-content: center
14
+ background-color: rgba(0, 0, 0, 0.3)
15
+ &__content
16
+ display: flex
17
+ flex-direction: column
18
+ align-items: flex-start
19
+ justify-content: flex-start
20
+ background-color: $white
21
+ box-shadow: 1px 1px 10px rgb(0 0 0 / 50%)
22
+ border-radius: 5px
23
+ overflow: hidden
24
+ width: 350px
25
+ &__head
26
+ width: 100%
27
+ padding: 10px
28
+ border-bottom: 1px solid #d1d1d1
29
+ color: rgba(74, 74, 74, .7)
30
+ text-align: center
31
+ font-size: .8rem
32
+ &__body
33
+ width: 100%
34
+ padding: 10px
35
+ text-align: center
36
+ font-size: .7rem
37
+ p
38
+ margin: 10px 0
39
+ &__footer
40
+ width: 100%
41
+ button
42
+ width: 100%
43
+ background-color: $mainColor
44
+ font-size: .8rem
45
+ font-weight: 500
46
+ text-align: center
47
+ color: #000000
48
+ cursor: pointer
49
+ border: none
50
+ padding: 10px 5px
package/build/assets/sass/components/tabs.sass ADDED
@@ -0,0 +1,117 @@
1
+ @import '../vars'
2
+
3
+ .widget-application
4
+ .widget-tab
5
+ width: 100%
6
+ height: 100%
7
+ display: flex
8
+ align-items: center
9
+ justify-content: center
10
+ padding: 60px 30px 125px 30px
11
+ @media (max-width: 630px)
12
+ padding: 60px 15px 90px 15px
13
+ &--panes-hidden
14
+ padding: 60px 30px
15
+ &__image
16
+ max-width: 100%
17
+ max-height: 100%
18
+ object-fit: contain
19
+ display: block
20
+ &__threesixty
21
+ width: 100%
22
+ height: 100%
23
+ touch-action: none
24
+ -webkit-touch-action: none
25
+ &-container
26
+ width: 100% !important
27
+ height: 100% !important
28
+ position: relative
29
+ cursor: move
30
+ background-image: none !important
31
+ img
32
+ position: absolute
33
+ left: 50%
34
+ top: 50%
35
+ transform: translate(-50%, -50%)
36
+ max-width: 100%
37
+ max-height: 100%
38
+ object-fit: contain
39
+ @include noSelect
40
+ &--panorama,
41
+ &--model
42
+ .widget-tab__image
43
+ position: absolute
44
+ z-index: 1
45
+ left: 0
46
+ top: 0
47
+ width: 100%
48
+ height: 100%
49
+ object-fit: cover
50
+
51
+ .widget-tab-panes
52
+ position: absolute
53
+ z-index: 3
54
+ left: 50%
55
+ bottom: 5px
56
+ max-width: 100%
57
+ padding: 0 30px 15px 30px
58
+ transform: translateX(-50%)
59
+ display: flex
60
+ align-items: center
61
+ justify-content: flex-start
62
+ overflow-x: auto
63
+ @media (max-width: 630px)
64
+ padding: 0 15px 15px 15px
65
+ .widget-tab-pane
66
+ width: 85px
67
+ height: 85px
68
+ border-radius: 5px
69
+ margin: 0 10px
70
+ background-color: $lightGray
71
+ cursor: pointer
72
+ border-width: 3px
73
+ border-style: solid
74
+ border-color: $lightGray
75
+ overflow: hidden
76
+ display: flex
77
+ align-items: center
78
+ justify-content: center
79
+ flex: none
80
+ transition: border .3s ease
81
+ position: relative
82
+ @include noSelect
83
+ @media (max-width: 630px)
84
+ width: 50px
85
+ height: 50px
86
+ margin: 0 5px
87
+ &::before
88
+ content: ''
89
+ position: absolute
90
+ left: 0
91
+ top: 0
92
+ width: 100%
93
+ height: 100%
94
+ box-shadow: inset 1px 1px 10px rgb(0 0 0 / 30%)
95
+ &--active,
96
+ &:hover
97
+ border-color: $mainColor
98
+ &__image
99
+ width: 100%
100
+ height: 100%
101
+ object-fit: cover
102
+ object-position: center
103
+ display: block
104
+ &__icon
105
+ width: 16px
106
+ height: 16px
107
+ object-fit: contain
108
+ object-position: center
109
+ display: block
110
+ position: absolute
111
+ left: 10px
112
+ bottom: 8px
113
+ @media (max-width: 630px)
114
+ width: 12px
115
+ height: 12px
116
+ left: 5px
117
+ bottom: 3px
package/build/assets/sass/index.sass ADDED
@@ -0,0 +1,45 @@
1
+ @import './vars'
2
+
3
+ *, *:before, *:after
4
+ box-sizing: border-box
5
+ -webkit-box-sizing: border-box
6
+ margin: 0
7
+ padding: 0
8
+ -webkit-font-smoothing: antialiased
9
+ -moz-osx-font-smoothing: grayscale
10
+ outline: none
11
+ font-family: 'Lato', sans-serif
12
+ font-weight: 400
13
+ text-decoration: none
14
+
15
+ html, body
16
+ font-size: 20px
17
+
18
+ .widget-application
19
+ --vh: 100vh
20
+
21
+ width: 100%
22
+ height: calc(100 * var(--vh))
23
+ overflow: hidden
24
+ position: relative
25
+ z-index: 1
26
+ .widget-close
27
+ position: absolute
28
+ display: flex
29
+ align-items: center
30
+ justify-content: center
31
+ z-index: 3
32
+ right: 15px
33
+ top: 15px
34
+ color: $black
35
+ background-color: $mainColor
36
+ padding: 5px 15px
37
+ border-radius: 10px
38
+ font-size: .8rem
39
+ border: none
40
+ cursor: pointer
41
+ &:hover
42
+ box-shadow: 1px 1px 10px rgb(0 0 0 / 15%)
43
+
44
+ @import './components/tabs'
45
+ @import './components/instructions'
package/build/assets/sass/vars.sass ADDED
@@ -0,0 +1,15 @@
1
+ $mobile: "only screen and (max-width: 545px)"
2
+ $tablet: "only screen and (max-width: 900px)"
3
+ $laptop: "only screen and (max-width: 1440px)"
4
+ $desktop: "only screen and (min-width: 1441px)"
5
+
6
+ $white: #FFFFFF
7
+ $black: #000000
8
+ $lightGray: #F4F7F7
9
+ $mainColor: #FAD436
10
+
11
+ @mixin noSelect
12
+ user-select: none
13
+ -webkit-user-select: none
14
+ user-drag: none
15
+ -webkit-user-drag: none
package/build/components/ImageTab.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ const ImageTab = _ref => {
9
+ let {
10
+ image
11
+ } = _ref;
12
+ return /*#__PURE__*/React.createElement("img", {
13
+ className: "widget-tab__image",
14
+ src: image,
15
+ alt: "plan-view"
16
+ });
17
+ };
18
+
19
+ var _default = ImageTab;
20
+ exports.default = _default;
package/build/components/Instructions.js ADDED
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ const Instructions = _ref => {
9
+ let {
10
+ title,
11
+ text,
12
+ onClick
13
+ } = _ref;
14
+ return /*#__PURE__*/React.createElement("div", {
15
+ className: "widget-instructions"
16
+ }, /*#__PURE__*/React.createElement("div", {
17
+ className: "widget-instructions__content"
18
+ }, /*#__PURE__*/React.createElement("div", {
19
+ className: "widget-instructions__head"
20
+ }, title), /*#__PURE__*/React.createElement("div", {
21
+ className: "widget-instructions__body"
22
+ }, text.map((row, index) => /*#__PURE__*/React.createElement("p", {
23
+ key: index
24
+ }, row))), /*#__PURE__*/React.createElement("div", {
25
+ className: "widget-instructions__footer"
26
+ }, /*#__PURE__*/React.createElement("button", {
27
+ onClick: onClick,
28
+ type: "button"
29
+ }, "Start"))));
30
+ };
31
+
32
+ var _default = Instructions;
33
+ exports.default = _default;
package/build/components/RotationTab.js ADDED
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+
10
+ var _react = require("react");
11
+
12
+ var _threesixty = _interopRequireDefault(require("lib/threesixty"));
13
+
14
+ var _panzoom = _interopRequireDefault(require("panzoom"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ const RotationTab = _ref => {
19
+ let {
20
+ images
21
+ } = _ref;
22
+ const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
23
+ (0, _react.useEffect)(() => {
24
+ const container = document.querySelector('.widget-tab__threesixty-container');
25
+ const widgetTab = document.querySelector('.widget-tab');
26
+ const rotation = new _threesixty.default(container, {
27
+ image: images.map(img => img),
28
+ parentElement: widgetTab,
29
+ inverted: true
30
+ });
31
+
32
+ rotation._update = () => setActiveIndex(rotation.index);
33
+
34
+ let lastIndex = 0;
35
+ const controller = (0, _panzoom.default)(container, {
36
+ maxZoom: 3,
37
+ minZoom: 0.5,
38
+ beforeMouseDown: e => !e.shiftKey
39
+ });
40
+ controller.on('panstart', () => {
41
+ lastIndex = rotation.index;
42
+
43
+ rotation._update = () => {};
44
+ });
45
+ controller.on('panend', () => {
46
+ rotation.goto(lastIndex);
47
+
48
+ rotation._update = () => setActiveIndex(rotation.index);
49
+ });
50
+ }, [images]);
51
+ return /*#__PURE__*/React.createElement("div", {
52
+ className: "widget-tab__threesixty"
53
+ }, /*#__PURE__*/React.createElement("div", {
54
+ className: "widget-tab__threesixty-container"
55
+ }, images.map((img, index) => /*#__PURE__*/React.createElement("img", {
56
+ src: img,
57
+ key: index,
58
+ alt: "rotation-view-".concat(index),
59
+ style: {
60
+ opacity: activeIndex === index ? 1 : 0
61
+ }
62
+ }))));
63
+ };
64
+
65
+ var _default = RotationTab;
66
+ exports.default = _default;
package/build/components/TabPanes.js ADDED
@@ -0,0 +1,90 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _mobxReactLite = require("mobx-react-lite");
9
+
10
+ var _store = _interopRequireDefault(require("store"));
11
+
12
+ var _refreshIcon = _interopRequireDefault(require("assets/img/refresh-icon.svg"));
13
+
14
+ var _D = _interopRequireDefault(require("assets/img/3D.jpg"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ const TabPanes = (0, _mobxReactLite.observer)(_ref => {
19
+ let {
20
+ currentTab,
21
+ setCurrentTab
22
+ } = _ref;
23
+ const {
24
+ planImage,
25
+ topView,
26
+ topDownView,
27
+ panoramaImages,
28
+ rotationImages,
29
+ tabs
30
+ } = _store.default.config;
31
+ const images = {
32
+ 'planImage': {
33
+ img: planImage,
34
+ icon: null
35
+ },
36
+ 'topView': {
37
+ img: topView,
38
+ icon: null
39
+ },
40
+ 'topDownView': {
41
+ img: topDownView,
42
+ icon: null
43
+ },
44
+ 'panorama': {
45
+ img: panoramaImages[0],
46
+ icon: null
47
+ },
48
+ 'rotation': {
49
+ img: rotationImages[0],
50
+ icon: _refreshIcon.default
51
+ },
52
+ 'model': {
53
+ img: _D.default,
54
+ icon: null
55
+ }
56
+ };
57
+ return /*#__PURE__*/React.createElement("div", {
58
+ className: "widget-tab-panes"
59
+ }, tabs.map((tab, index) => /*#__PURE__*/React.createElement(TabPane, {
60
+ key: index,
61
+ icon: images[tab].icon,
62
+ image: images[tab].img,
63
+ active: currentTab === tab,
64
+ onClick: () => setCurrentTab(tab)
65
+ })));
66
+ });
67
+
68
+ const TabPane = _ref2 => {
69
+ let {
70
+ active,
71
+ icon,
72
+ image,
73
+ onClick
74
+ } = _ref2;
75
+ return /*#__PURE__*/React.createElement("div", {
76
+ className: "widget-tab-pane ".concat(active ? 'widget-tab-pane--active' : ''),
77
+ onClick: onClick
78
+ }, /*#__PURE__*/React.createElement("img", {
79
+ className: "widget-tab-pane__image",
80
+ src: image,
81
+ alt: "tab-pane"
82
+ }), icon && /*#__PURE__*/React.createElement("img", {
83
+ className: "widget-tab-pane__icon",
84
+ src: icon,
85
+ alt: "tab-pane-icon"
86
+ }));
87
+ };
88
+
89
+ var _default = TabPanes;
90
+ exports.default = _default;
package/build/components/TabWrapper.js ADDED
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _ImageTab = _interopRequireDefault(require("components/ImageTab"));
9
+
10
+ var _Instructions = _interopRequireDefault(require("components/Instructions"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ const TabWrapper = _ref => {
15
+ let {
16
+ isActive,
17
+ image,
18
+ title,
19
+ text,
20
+ onStart,
21
+ children
22
+ } = _ref;
23
+
24
+ if (!isActive) {
25
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ImageTab.default, {
26
+ image: image
27
+ }), /*#__PURE__*/React.createElement(_Instructions.default, {
28
+ title: title,
29
+ text: text,
30
+ onClick: onStart
31
+ }));
32
+ }
33
+
34
+ return children;
35
+ };
36
+
37
+ var _default = TabWrapper;
38
+ exports.default = _default;
package/build/defaultConfig.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ const defaultConfig = {
8
+ container: 'widget-container',
9
+ tabs: ['planImage', 'topView', 'topDownView', 'rotation', 'panorama', 'model'],
10
+ tabPanes: true,
11
+ width: null,
12
+ height: null,
13
+ planImage: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/952c2131-5a8b-4afd-8083-b56d4357aa5c/plan.png',
14
+ topView: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopView_0_0.png',
15
+ topDownView: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/MiddleCut_0_0_0.png',
16
+ rotationImages: ['https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_0.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_1.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_2.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_3.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_4.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_5.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_6.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_7.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_8.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_9.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_10.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_11.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_12.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_13.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_14.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_15.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_16.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_17.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_18.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_19.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_20.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_21.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_22.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_23.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_24.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_25.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_26.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_27.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_28.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_29.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_30.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_31.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_32.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_33.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_34.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_35.png'],
17
+ panoramaImages: ['https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_0.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_1.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_2.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_3.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_4.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_5.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_6.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_7.png']
18
+ };
19
+ var _default = defaultConfig;
20
+ exports.default = _default;
package/build/index.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _Widget = _interopRequireDefault(require("./Widget"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ var _default = _Widget.default;
13
+ exports.default = _default;
package/build/lib/threesixty/events.js ADDED
@@ -0,0 +1,193 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+
10
+ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
11
+
12
+ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
13
+
14
+ function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
15
+
16
+ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
17
+
18
+ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
19
+
20
+ function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
21
+
22
+ function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
23
+
24
+ var _dragOrigin = /*#__PURE__*/new WeakMap();
25
+
26
+ var _options = /*#__PURE__*/new WeakMap();
27
+
28
+ var _eventHandlers = /*#__PURE__*/new WeakMap();
29
+
30
+ class Events {
31
+ constructor(threesixty, options) {
32
+ _classPrivateFieldInitSpec(this, _dragOrigin, {
33
+ writable: true,
34
+ value: null
35
+ });
36
+
37
+ _classPrivateFieldInitSpec(this, _options, {
38
+ writable: true,
39
+ value: null
40
+ });
41
+
42
+ _classPrivateFieldInitSpec(this, _eventHandlers, {
43
+ writable: true,
44
+ value: null
45
+ });
46
+
47
+ _classPrivateFieldSet(this, _options, options);
48
+
49
+ _classPrivateFieldSet(this, _eventHandlers, {
50
+ container: {
51
+ mousedown: e => _classPrivateFieldSet(this, _dragOrigin, e.pageX),
52
+ touchstart: e => _classPrivateFieldSet(this, _dragOrigin, e.touches[0].clientX),
53
+ touchend: () => _classPrivateFieldSet(this, _dragOrigin, null)
54
+ },
55
+ prev: {
56
+ mousedown: e => {
57
+ e.preventDefault();
58
+ threesixty.play(true);
59
+ },
60
+ mouseup: e => {
61
+ e.preventDefault();
62
+ threesixty.stop();
63
+ },
64
+ touchstart: e => {
65
+ e.preventDefault();
66
+ threesixty.prev();
67
+ }
68
+ },
69
+ next: {
70
+ mousedown: e => {
71
+ e.preventDefault();
72
+ threesixty.play();
73
+ },
74
+ mouseup: e => {
75
+ e.preventDefault();
76
+ threesixty.stop();
77
+ },
78
+ touchstart: e => {
79
+ e.preventDefault();
80
+ threesixty.next();
81
+ }
82
+ },
83
+ global: {
84
+ mouseup: () => _classPrivateFieldSet(this, _dragOrigin, null),
85
+ mousemove: e => {
86
+ if (_classPrivateFieldGet(this, _dragOrigin) && Math.abs(_classPrivateFieldGet(this, _dragOrigin) - e.pageX) > _classPrivateFieldGet(this, _options).dragTolerance) {
87
+ threesixty.stop();
88
+ _classPrivateFieldGet(this, _dragOrigin) > e.pageX ? threesixty.prev() : threesixty.next();
89
+
90
+ _classPrivateFieldSet(this, _dragOrigin, e.pageX);
91
+ }
92
+ },
93
+ touchmove: e => {
94
+ if (e.touches.length === 2) return;
95
+ if (e.touches.length === 1) e.stopPropagation();
96
+
97
+ if (_classPrivateFieldGet(this, _dragOrigin) && Math.abs(_classPrivateFieldGet(this, _dragOrigin) - e.touches[0].clientX) > _classPrivateFieldGet(this, _options).swipeTolerance) {
98
+ threesixty.stop();
99
+ _classPrivateFieldGet(this, _dragOrigin) > e.touches[0].clientX ? threesixty.prev() : threesixty.next();
100
+
101
+ _classPrivateFieldSet(this, _dragOrigin, e.touches[0].clientX);
102
+ }
103
+ },
104
+ keydown: e => {
105
+ if ([37, 39].includes(e.keyCode)) {
106
+ threesixty.play(37 === e.keyCode);
107
+ }
108
+ },
109
+ keyup: e => {
110
+ if ([37, 39].includes(e.keyCode)) {
111
+ threesixty.stop();
112
+ }
113
+ }
114
+ }
115
+ });
116
+
117
+ this._initEvents();
118
+ }
119
+
120
+ destroy() {
121
+ _classPrivateFieldGet(this, _options).swipeTarget.removeEventListener('mousedown', _classPrivateFieldGet(this, _eventHandlers).container.mousedown);
122
+
123
+ _classPrivateFieldGet(this, _options).swipeTarget.removeEventListener('touchstart', _classPrivateFieldGet(this, _eventHandlers).container.touchstart);
124
+
125
+ _classPrivateFieldGet(this, _options).swipeTarget.removeEventListener('touchend', _classPrivateFieldGet(this, _eventHandlers).container.touchend);
126
+
127
+ global.removeEventListener('mouseup', _classPrivateFieldGet(this, _eventHandlers).global.mouseup);
128
+ global.removeEventListener('mousemove', _classPrivateFieldGet(this, _eventHandlers).global.mousemove);
129
+
130
+ _classPrivateFieldGet(this, _options).parentElement.removeEventListener('touchmove', _classPrivateFieldGet(this, _eventHandlers).global.touchmove);
131
+
132
+ global.removeEventListener('keydown', _classPrivateFieldGet(this, _eventHandlers).global.keydown);
133
+ global.removeEventListener('keyup', _classPrivateFieldGet(this, _eventHandlers).global.keyup);
134
+
135
+ if (_classPrivateFieldGet(this, _options).prev) {
136
+ _classPrivateFieldGet(this, _options).prev.removeEventListener('mousedown', _classPrivateFieldGet(this, _eventHandlers).prev.mousedown);
137
+
138
+ _classPrivateFieldGet(this, _options).prev.removeEventListener('mouseup', _classPrivateFieldGet(this, _eventHandlers).prev.mouseup);
139
+
140
+ _classPrivateFieldGet(this, _options).prev.removeEventListener('touchstart', _classPrivateFieldGet(this, _eventHandlers).prev.touchstart);
141
+ }
142
+
143
+ if (_classPrivateFieldGet(this, _options).next) {
144
+ _classPrivateFieldGet(this, _options).next.removeEventListener('mousedown', _classPrivateFieldGet(this, _eventHandlers).next.mousedown);
145
+
146
+ _classPrivateFieldGet(this, _options).next.removeEventListener('mouseup', _classPrivateFieldGet(this, _eventHandlers).next.mouseup);
147
+
148
+ _classPrivateFieldGet(this, _options).next.removeEventListener('touchstart', _classPrivateFieldGet(this, _eventHandlers).next.touchstart);
149
+ }
150
+ }
151
+
152
+ _initEvents() {
153
+ if (_classPrivateFieldGet(this, _options).draggable) {
154
+ _classPrivateFieldGet(this, _options).swipeTarget.addEventListener('mousedown', _classPrivateFieldGet(this, _eventHandlers).container.mousedown);
155
+
156
+ global.addEventListener('mouseup', _classPrivateFieldGet(this, _eventHandlers).global.mouseup);
157
+ global.addEventListener('mousemove', _classPrivateFieldGet(this, _eventHandlers).global.mousemove);
158
+ }
159
+
160
+ if (_classPrivateFieldGet(this, _options).swipeable) {
161
+ _classPrivateFieldGet(this, _options).swipeTarget.addEventListener('touchstart', _classPrivateFieldGet(this, _eventHandlers).container.touchstart);
162
+
163
+ _classPrivateFieldGet(this, _options).swipeTarget.addEventListener('touchend', _classPrivateFieldGet(this, _eventHandlers).container.touchend);
164
+
165
+ _classPrivateFieldGet(this, _options).parentElement.addEventListener('touchmove', _classPrivateFieldGet(this, _eventHandlers).global.touchmove);
166
+ }
167
+
168
+ if (_classPrivateFieldGet(this, _options).keys) {
169
+ global.addEventListener('keydown', _classPrivateFieldGet(this, _eventHandlers).global.keydown);
170
+ global.addEventListener('keyup', _classPrivateFieldGet(this, _eventHandlers).global.keyup);
171
+ }
172
+
173
+ if (_classPrivateFieldGet(this, _options).prev) {
174
+ _classPrivateFieldGet(this, _options).prev.addEventListener('mousedown', _classPrivateFieldGet(this, _eventHandlers).prev.mousedown);
175
+
176
+ _classPrivateFieldGet(this, _options).prev.addEventListener('mouseup', _classPrivateFieldGet(this, _eventHandlers).prev.mouseup);
177
+
178
+ _classPrivateFieldGet(this, _options).prev.addEventListener('touchstart', _classPrivateFieldGet(this, _eventHandlers).prev.touchstart);
179
+ }
180
+
181
+ if (_classPrivateFieldGet(this, _options).next) {
182
+ _classPrivateFieldGet(this, _options).next.addEventListener('mousedown', _classPrivateFieldGet(this, _eventHandlers).next.mousedown);
183
+
184
+ _classPrivateFieldGet(this, _options).next.addEventListener('mouseup', _classPrivateFieldGet(this, _eventHandlers).next.mouseup);
185
+
186
+ _classPrivateFieldGet(this, _options).next.addEventListener('touchstart', _classPrivateFieldGet(this, _eventHandlers).next.touchstart);
187
+ }
188
+ }
189
+
190
+ }
191
+
192
+ var _default = Events;
193
+ exports.default = _default;
package/build/lib/threesixty/index.js ADDED
@@ -0,0 +1,236 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/es.object.assign.js");
9
+
10
+ require("core-js/modules/web.dom-collections.iterator.js");
11
+
12
+ var _events2 = _interopRequireDefault(require("./events"));
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
17
+
18
+ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
19
+
20
+ function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
21
+
22
+ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
23
+
24
+ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
25
+
26
+ function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
27
+
28
+ function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
29
+
30
+ var _options = /*#__PURE__*/new WeakMap();
31
+
32
+ var _index = /*#__PURE__*/new WeakMap();
33
+
34
+ var _loopTimeoutId = /*#__PURE__*/new WeakMap();
35
+
36
+ var _looping = /*#__PURE__*/new WeakMap();
37
+
38
+ var _events = /*#__PURE__*/new WeakMap();
39
+
40
+ var _sprite = /*#__PURE__*/new WeakMap();
41
+
42
+ class ThreeSixty {
43
+ constructor(container, options) {
44
+ _classPrivateFieldInitSpec(this, _options, {
45
+ writable: true,
46
+ value: null
47
+ });
48
+
49
+ _classPrivateFieldInitSpec(this, _index, {
50
+ writable: true,
51
+ value: 0
52
+ });
53
+
54
+ _classPrivateFieldInitSpec(this, _loopTimeoutId, {
55
+ writable: true,
56
+ value: null
57
+ });
58
+
59
+ _classPrivateFieldInitSpec(this, _looping, {
60
+ writable: true,
61
+ value: false
62
+ });
63
+
64
+ _classPrivateFieldInitSpec(this, _events, {
65
+ writable: true,
66
+ value: null
67
+ });
68
+
69
+ _classPrivateFieldInitSpec(this, _sprite, {
70
+ writable: true,
71
+ value: false
72
+ });
73
+
74
+ this.container = container;
75
+
76
+ _classPrivateFieldSet(this, _options, Object.assign({
77
+ width: 300,
78
+ height: 300,
79
+ aspectRatio: 0,
80
+ count: 0,
81
+ perRow: 0,
82
+ speed: 100,
83
+ dragTolerance: 10,
84
+ swipeTolerance: 10,
85
+ draggable: true,
86
+ swipeable: true,
87
+ keys: true,
88
+ inverted: false
89
+ }, options));
90
+
91
+ _classPrivateFieldGet(this, _options).swipeTarget = _classPrivateFieldGet(this, _options).swipeTarget || this.container;
92
+
93
+ _classPrivateFieldSet(this, _sprite, !Array.isArray(_classPrivateFieldGet(this, _options).image));
94
+
95
+ if (!this.sprite) {
96
+ _classPrivateFieldGet(this, _options).count = _classPrivateFieldGet(this, _options).image.length;
97
+ }
98
+
99
+ Object.freeze(_classPrivateFieldGet(this, _options));
100
+
101
+ _classPrivateFieldSet(this, _events, new _events2.default(this, _classPrivateFieldGet(this, _options)));
102
+
103
+ this._windowResizeListener = this._windowResizeListener.bind(this);
104
+
105
+ this._initContainer();
106
+ }
107
+
108
+ get isResponsive() {
109
+ return _classPrivateFieldGet(this, _options).aspectRatio > 0;
110
+ }
111
+
112
+ get containerWidth() {
113
+ return this.isResponsive ? this.container.clientWidth : _classPrivateFieldGet(this, _options).width;
114
+ }
115
+
116
+ get containerHeight() {
117
+ return this.isResponsive ? this.container.clientWidth * _classPrivateFieldGet(this, _options).aspectRatio : _classPrivateFieldGet(this, _options).height;
118
+ }
119
+
120
+ get index() {
121
+ return _classPrivateFieldGet(this, _index);
122
+ }
123
+
124
+ get looping() {
125
+ return _classPrivateFieldGet(this, _looping);
126
+ }
127
+
128
+ get sprite() {
129
+ return _classPrivateFieldGet(this, _sprite);
130
+ }
131
+
132
+ next() {
133
+ this.goto(_classPrivateFieldGet(this, _options).inverted ? _classPrivateFieldGet(this, _index) - 1 : _classPrivateFieldGet(this, _index) + 1);
134
+ }
135
+
136
+ prev() {
137
+ this.goto(_classPrivateFieldGet(this, _options).inverted ? _classPrivateFieldGet(this, _index) + 1 : _classPrivateFieldGet(this, _index) - 1);
138
+ }
139
+
140
+ goto(index) {
141
+ _classPrivateFieldSet(this, _index, (_classPrivateFieldGet(this, _options).count + index) % _classPrivateFieldGet(this, _options).count);
142
+
143
+ this._update();
144
+ }
145
+
146
+ play(reversed) {
147
+ if (this.looping) {
148
+ return;
149
+ }
150
+
151
+ this._loop(reversed);
152
+
153
+ _classPrivateFieldSet(this, _looping, true);
154
+ }
155
+
156
+ stop() {
157
+ if (!this.looping) {
158
+ return;
159
+ }
160
+
161
+ global.clearTimeout(_classPrivateFieldGet(this, _loopTimeoutId));
162
+
163
+ _classPrivateFieldSet(this, _looping, false);
164
+ }
165
+
166
+ toggle(reversed) {
167
+ this.looping ? this.stop() : this.play(reversed);
168
+ }
169
+
170
+ destroy() {
171
+ this.stop();
172
+
173
+ _classPrivateFieldGet(this, _events).destroy();
174
+
175
+ this.container.style.width = '';
176
+ this.container.style.height = '';
177
+ this.container.style.backgroundImage = '';
178
+ this.container.style.backgroundPositionX = '';
179
+ this.container.style.backgroundPositionY = '';
180
+ this.container.style.backgroundSize = '';
181
+
182
+ if (this.isResponsive) {
183
+ window.removeEventListener('resize', this._windowResizeListener);
184
+ }
185
+ }
186
+
187
+ _loop(reversed) {
188
+ reversed ? this.prev() : this.next();
189
+
190
+ _classPrivateFieldSet(this, _loopTimeoutId, global.setTimeout(() => {
191
+ this._loop(reversed);
192
+ }, _classPrivateFieldGet(this, _options).speed));
193
+ }
194
+
195
+ _update() {
196
+ if (this.sprite) {
197
+ this.container.style.backgroundPositionX = -(_classPrivateFieldGet(this, _index) % _classPrivateFieldGet(this, _options).perRow) * this.containerWidth + 'px';
198
+ this.container.style.backgroundPositionY = -Math.floor(_classPrivateFieldGet(this, _index) / _classPrivateFieldGet(this, _options).perRow) * this.containerHeight + 'px';
199
+ } else {
200
+ this.container.style.backgroundImage = "url(\"".concat(_classPrivateFieldGet(this, _options).image[_classPrivateFieldGet(this, _index)], "\")");
201
+ }
202
+ }
203
+
204
+ _windowResizeListener() {
205
+ this.container.style.height = this.containerHeight + 'px';
206
+
207
+ this._update();
208
+ }
209
+
210
+ _initContainer() {
211
+ if (!this.isResponsive) {
212
+ this.container.style.width = this.containerWidth + 'px';
213
+ }
214
+
215
+ this.container.style.height = this.containerHeight + 'px';
216
+
217
+ if (this.sprite) {
218
+ this.container.style.backgroundImage = "url(\"".concat(_classPrivateFieldGet(this, _options).image, "\")");
219
+
220
+ const cols = _classPrivateFieldGet(this, _options).perRow;
221
+
222
+ const rows = Math.ceil(_classPrivateFieldGet(this, _options).count / _classPrivateFieldGet(this, _options).perRow);
223
+ this.container.style.backgroundSize = cols * 100 + '% ' + rows * 100 + '%';
224
+ }
225
+
226
+ if (this.isResponsive) {
227
+ window.addEventListener('resize', this._windowResizeListener);
228
+ }
229
+
230
+ this._update();
231
+ }
232
+
233
+ }
234
+
235
+ var _default = ThreeSixty;
236
+ exports.default = _default;
package/build/store/index.js ADDED
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _mobx = require("mobx");
9
+
10
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
11
+
12
+ (0, _mobx.configure)({
13
+ useProxies: 'never'
14
+ });
15
+
16
+ class Store {
17
+ constructor() {
18
+ _defineProperty(this, "config", null);
19
+
20
+ (0, _mobx.makeAutoObservable)(this);
21
+ }
22
+
23
+ setConfig(config) {
24
+ this.config = config;
25
+ }
26
+
27
+ }
28
+
29
+ var _default = new Store();
30
+
31
+ exports.default = _default;
package/package.json ADDED
@@ -0,0 +1,61 @@
1
+ {
2
+ "name": "hart-estate-widget",
3
+ "description": "HART Estate widget",
4
+ "author": "HART",
5
+ "keywords": [
6
+ "react",
7
+ "hart",
8
+ "widget",
9
+ "estate"
10
+ ],
11
+ "version": "1.0.0",
12
+ "private": false,
13
+ "main": "build/index.js",
14
+ "module": "build/index.js",
15
+ "files": [
16
+ "build",
17
+ "README.md"
18
+ ],
19
+ "repository": {
20
+ "type": "git",
21
+ "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
22
+ },
23
+ "scripts": {
24
+ "start": "node scripts/start.js",
25
+ "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files",
26
+ "test": "react-scripts test",
27
+ "eject": "react-scripts eject"
28
+ },
29
+ "dependencies": {
30
+ "@babel/polyfill": "^7.12.1",
31
+ "mobx": "^6.3.13",
32
+ "mobx-react-lite": "^3.2.3",
33
+ "panzoom": "^9.4.2",
34
+ "react": "^17.0.2",
35
+ "react-dom": "^17.0.2",
36
+ "react-scripts": "^5.0.0"
37
+ },
38
+ "devDependencies": {
39
+ "@babel/cli": "^7.17.0",
40
+ "@babel/core": "^7.17.0",
41
+ "@babel/eslint-parser": "^7.16.3",
42
+ "@babel/preset-env": "^7.16.11",
43
+ "eslint": "^8.0.0",
44
+ "eslint-config-react-app": "^7.0.0",
45
+ "eslint-plugin-react": "^7.28.0",
46
+ "rewire": "^6.0.0",
47
+ "sass": "^1.46.0"
48
+ },
49
+ "browserslist": {
50
+ "production": [
51
+ ">0.2%",
52
+ "not dead",
53
+ "not op_mini all"
54
+ ],
55
+ "development": [
56
+ "last 1 chrome version",
57
+ "last 1 firefox version",
58
+ "last 1 safari version"
59
+ ]
60
+ }
61
+ }