hart-estate-widget 0.0.61 → 0.0.64

package/build/assets/sass/components/tabs.sass

@@ -10,10 +10,10 @@
     display: flex
     align-items: center
     justify-content: flex-end
-    @media #{$tablet}
+    @include media($tablet)
       right: 20px
       bottom: 35px
-    @media #{$w-374}
+    @include media($smallMobile)
       bottom: 30px
   .widget-tab-button
     @include customButton
@@ -29,17 +29,17 @@
     line-height: 120%
     font-weight: bold
     margin-left: 40px
-    @media #{$tablet}
+    @include media($tablet)
       margin-left: 20px
       width: 60px
       height: 60px
       font-size: 22px
-    @media #{$mobile}
+    @include media($mobile)
       margin-left: 10px
       font-size: 17px
       width: 44px
       height: 44px
-    @media #{$w-374}
+    @include media($smallMobile)
       width: 36px
       height: 36px
       font-size: 14px
@@ -53,114 +53,8 @@
     align-items: center
     justify-content: center
     padding: 60px 30px
-    @media (max-width: 630px)
+    @include media($smallMobile)
       padding: 60px 20px
-    &__image
-      max-width: 100%
-      max-height: 100%
-      object-fit: contain
-      display: block
-    &__threesixty
-      width: 100%
-      height: 100%
-      @include noTouch
-      &-start
-        @include customButton
-        position: absolute
-        left: 50%
-        bottom: 35px
-        transform: translateX(-50%)
-        display: flex
-        align-items: center
-        justify-content: center
-        padding: 0 25px 0 10px
-        background-color: $gray
-        border-radius: 38px
-        height: 72px
-        width: 202px
-        @media #{$tablet}
-          height: 60px
-          width: 166px
-          padding: 0 20px 0 8px
-          bottom: 35px
-        @media #{$mobile}
-          height: 44px
-          width: 115px
-          padding: 0 10px 0 6px
-        @media #{$w-374}
-          height: 36px
-          width: 94px
-          padding: 0 8px 0 6px
-          bottom: 30px
-        &-icon
-          display: flex
-          align-items: center
-          justify-content: center
-          border-radius: 50%
-          background-color: $white
-          margin-right: 18px
-          padding: 10px
-          @media #{$tablet}
-            padding: 7px
-            margin-right: 15px
-          @media #{$mobile}
-            margin-right: 7px
-          @media #{$w-374}
-            padding: 6px
-            margin-right: 5px
-          img
-            display: block
-            position: relative
-            top: 2px
-            width: 34px
-            @media #{$tablet}
-              width: 30px
-              top: 1px
-            @media #{$mobile}
-              width: 19px
-              top: 0
-            @media #{$w-374}
-              width: 15px
-        span
-          font-size: 24px
-          font-weight: bold
-          color: $text-dark
-          text-transform: uppercase
-          width: 100%
-          display: block
-          text-align: center
-          position: relative
-          top: 1px
-          @media #{$tablet}
-            font-size: 20px
-          @media #{$mobile}
-            font-size: 14px
-          @media #{$w-374}
-            font-size: 12px
-      &-container
-        width: 100% !important
-        height: 100% !important
-        position: relative
-        background-image: none !important
-        img
-          position: absolute
-          left: 50%
-          top: 50%
-          transform: translate(-50%, -50%)
-          max-width: 100%
-          max-height: 100%
-          width: 600px
-          height: 600px
-          object-fit: contain
-          opacity: 0
-          pointer-events: none
-          @include noSelect
-          &.active
-            opacity: 1
-      &--active
-        .widget-tab__threesixty-container
-          cursor: move
-
     &-menu
       position: absolute
       z-index: 3

package/build/assets/sass/index.sass

@@ -2,10 +2,9 @@
 @import './mixin'
 
 .widget-application
-  --vh: 100vh
-
   width: 100%
-  height: calc(100 * var(--vh))
+  height: 100%
+  flex: none
   overflow: hidden
   position: relative
   z-index: 1
@@ -30,10 +29,10 @@
     left: 45px
     top: 30px
     z-index: 3
-    @media #{$tablet}
+    @include media($tablet)
       left: 20px
       top: 30px
-    @media #{$w-374}
+    @include media($smallMobile)
       top: 25px
     img
       display: block
@@ -41,52 +40,26 @@
       height: 82px
       object-fit: contain
       object-position: center
-      @media #{$tablet}
+      @include media($tablet)
         width: 65px
         height: 65px
-      @media #{$mobile}
+      @include media($mobile)
         width: 42px
         height: 42px
-      @media #{$w-374}
+      @include media($smallMobile)
         width: 36px
         height: 36px
 
-  .widget-tab__panorama-close-map,
-  .widget-enter-fullscreen,
+  .widget-tab__panorama-close-map
+    @include rightActionButton
+  .widget-enter-fullscreen
+    @include rightActionButton
   .widget-exit-fullscreen
-    position: absolute
-    right: 45px
-    top: 36px
-    z-index: 3
-    padding: 10px
-    touch-action: none
-    @include customButton
-    @media #{$tablet}
-      right: 17px
-      top: 35px
-    @media #{$mobile}
-      padding: 5px
-      right: 20px
-    @media #{$w-374}
-      top: 25px
-    img
-      display: block
-      width: 50px
-      height: 50px
-      object-fit: contain
-      object-position: center
-      @media #{$tablet}
-        width: 40px
-        height: 40px
-      @media #{$mobile}
-        width: 32px
-        height: 32px
-      @media #{$w-374}
-        width: 26px
-        height: 26px
+    @include rightActionButton
 
 @import './components/tabs'
 @import './components/instructions'
 @import './components/panorama'
+@import './components/rotation'
 @import './components/loader'
 @import './components/model'

package/build/assets/sass/mixin.sass

@@ -9,4 +9,40 @@
   backdrop-filter: blur($blur)
   -moz-backdrop-filter: blur($blur)
   -webkit-backdrop-filter: blur($blur)
-  
+
+@mixin media($device)
+  $this: &
+  @at-root .widget-application--#{$device}#{$this}
+    @content
+
+@mixin rightActionButton
+  position: absolute
+  right: 45px
+  top: 36px
+  z-index: 3
+  padding: 10px
+  touch-action: none
+  @include customButton
+  @include media($tablet)
+    right: 17px
+    top: 35px
+  @include media($mobile)
+    padding: 5px
+    right: 20px
+  @include media($smallMobile)
+    top: 25px
+  img
+    display: block
+    width: 50px
+    height: 50px
+    object-fit: contain
+    object-position: center
+    @include media($tablet)
+      width: 40px
+      height: 40px
+    @include media($mobile)
+      width: 32px
+      height: 32px
+    @include media($smallMobile)
+      width: 26px
+      height: 26px

package/build/assets/sass/vars.sass

@@ -1,8 +1,7 @@
-$w-374: "only screen and (max-width: 374px)"
-$mobile: "only screen and (max-width: 545px)"
-$tablet: "only screen and (max-width: 900px)"
-$laptop: "only screen and (max-width: 1440px)"
-$desktop: "only screen and (min-width: 1441px)"
+$smallMobile: "smallMobile"
+$mobile: "mobile"
+$tablet: "tablet"
+$laptop: "laptop"
 
 $white: #FFFFFF
 $black: #000000

package/build/components/Application.js

@@ -15,6 +15,8 @@ var _store = _interopRequireDefault(require("../store"));
 
 var _fullScreenStore = _interopRequireDefault(require("../store/fullScreenStore"));
 
+var _deviceWidth = require("../enums/deviceWidth");
+
 var _RotationTab = _interopRequireDefault(require("./RotationTab"));
 
 var _PanoramaTab = _interopRequireDefault(require("./PanoramaTab"));
@@ -43,13 +45,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Application = (0, _mobxReactLite.observer)(function (_ref) {
-  var width = _ref.width,
-      height = _ref.height;
+var Application = (0, _mobxReactLite.observer)(function () {
   var config = _store.default.config;
   var appStyle = {
-    width: width,
-    height: height
+    width: config.width,
+    height: config.height
   };
 
   var _useState = (0, _react.useState)(config.tabs[0]),
@@ -80,16 +80,8 @@ var Application = (0, _mobxReactLite.observer)(function (_ref) {
     tab: 'panorama',
     text: '3D'
   }];
-
-  var setWindowHeight = function setWindowHeight() {
-    document.querySelector('.widget-application').style.setProperty('--vh', window.innerHeight / 100 + 'px');
-  };
-
   (0, _react.useEffect)(function () {
     _fullScreenStore.default.init();
-
-    window.addEventListener('resize', setWindowHeight);
-    setWindowHeight();
   }, []);
   (0, _react.useEffect)(function () {
     if (config.tabs.some(function (tab) {
@@ -111,8 +103,15 @@ var Application = (0, _mobxReactLite.observer)(function (_ref) {
     });
   };
 
+  var getAppClass = function getAppClass() {
+    var className = (0, _deviceWidth.getDevicesByWidth)(config.width).reduce(function (acc, device) {
+      return acc += " widget-application--".concat(device);
+    }, 'widget-application');
+    return className;
+  };
+
   return /*#__PURE__*/_react.default.createElement("main", {
-    className: "widget-application",
+    className: getAppClass(),
     id: "widget-application",
     style: appStyle
   }, /*#__PURE__*/_react.default.createElement("section", {

package/build/components/PanoramaTab.js

@@ -268,63 +268,55 @@ var PanoramaTab = function PanoramaTab(_ref4) {
       setLoadingState = _useState6[1];
 
   var _useState7 = (0, _react.useState)({
-    width: 0,
-    height: 0
-  }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      windowSize = _useState8[0],
-      setWindowSize = _useState8[1];
-
-  var _useState9 = (0, _react.useState)({
     width: '200px',
     height: 'auto'
   }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      mapSize = _useState10[0],
-      setMapSize = _useState10[1];
+      _useState8 = _slicedToArray(_useState7, 2),
+      mapSize = _useState8[0],
+      setMapSize = _useState8[1];
 
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      mapOpen = _useState12[0],
-      setMapState = _useState12[1];
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      mapOpen = _useState10[0],
+      setMapState = _useState10[1];
 
-  var _useState13 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)({
     X: 1,
     Y: 1
   }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      planScale = _useState12[0],
+      setPlanScale = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(true),
       _useState14 = _slicedToArray(_useState13, 2),
-      planScale = _useState14[0],
-      setPlanScale = _useState14[1];
+      isMapDisabled = _useState14[0],
+      setMapDisabledState = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(true),
+  var _useState15 = (0, _react.useState)(false),
       _useState16 = _slicedToArray(_useState15, 2),
-      isMapDisabled = _useState16[0],
-      setMapDisabledState = _useState16[1];
+      autoplayEnabled = _useState16[0],
+      setAutoplayState = _useState16[1];
 
-  var _useState17 = (0, _react.useState)(false),
+  var _useState17 = (0, _react.useState)(cameraFovValues.x1),
       _useState18 = _slicedToArray(_useState17, 2),
-      autoplayEnabled = _useState18[0],
-      setAutoplayState = _useState18[1];
+      cameraFov = _useState18[0],
+      setCameraFov = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(cameraFovValues.x1),
+  var _useState19 = (0, _react.useState)(0),
       _useState20 = _slicedToArray(_useState19, 2),
-      cameraFov = _useState20[0],
-      setCameraFov = _useState20[1];
+      currentRoomIndex = _useState20[0],
+      setCurrentRoomIndex = _useState20[1];
 
-  var _useState21 = (0, _react.useState)(0),
+  var _useState21 = (0, _react.useState)([]),
       _useState22 = _slicedToArray(_useState21, 2),
-      currentRoomIndex = _useState22[0],
-      setCurrentRoomIndex = _useState22[1];
+      panoramas = _useState22[0],
+      setPanoramas = _useState22[1];
 
-  var _useState23 = (0, _react.useState)([]),
+  var _useState23 = (0, _react.useState)(null),
       _useState24 = _slicedToArray(_useState23, 2),
-      panoramas = _useState24[0],
-      setPanoramas = _useState24[1];
-
-  var _useState25 = (0, _react.useState)(null),
-      _useState26 = _slicedToArray(_useState25, 2),
-      viewer = _useState26[0],
-      setViewer = _useState26[1];
+      viewer = _useState24[0],
+      setViewer = _useState24[1];
 
   var changePanorama = function changePanorama(panorama) {
     setCurrentRoomIndex(panorama['panorama_index']);
@@ -334,14 +326,11 @@ var PanoramaTab = function PanoramaTab(_ref4) {
   var setScale = function setScale() {
     if (!viewer) return;
     var image = document.querySelector('.widget-tab__panorama-map img');
-    var _viewer$container = viewer.container,
-        clientWidth = _viewer$container.clientWidth,
-        clientHeight = _viewer$container.clientHeight;
     var imageWidth = image.naturalWidth;
     var imageHeight = image.naturalHeight;
     var imageDelta = imageWidth / imageHeight;
     var maxWidth = 200;
-    var maxHeight = clientHeight - 200;
+    var maxHeight = _store.default.config.height - 200;
     var width = maxWidth;
     var height = width / imageDelta;
 
@@ -358,7 +347,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
       width: width,
       height: height
     }, json));
-    viewer.onWindowResize(clientWidth, clientHeight);
+    viewer.onWindowResize(_store.default.config.width, _store.default.config.height);
   };
 
   var onImageLoaded = function onImageLoaded() {
@@ -419,21 +408,6 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     viewer.enableAutoRate();
   };
 
-  (0, _react.useEffect)(function () {
-    var onResize = function onResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-      closeMap();
-    };
-
-    onResize();
-    window.addEventListener('resize', onResize);
-    return function cleanup() {
-      window.removeEventListener('resize', onResize);
-    };
-  }, []);
   (0, _react.useEffect)(function () {
     if (!panoramas.length) return;
     var container = document.querySelector('.widget-tab__panorama-overlay');
@@ -479,7 +453,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
 
     animate();
   }, [panoramas]);
-  (0, _react.useEffect)(setScale, [json, windowSize, viewer]);
+  (0, _react.useEffect)(setScale, [json, viewer, _store.default.config.width, _store.default.config.height]);
   (0, _react.useEffect)(function () {
     return setPanoramas(getPanoramas(json, images, setLoadingState));
   }, [json, images]);
@@ -546,7 +520,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
   var onMapClick = function onMapClick(event) {
     if (loadingState) return;
 
-    if (windowSize.width <= _deviceWidth.deviceWidth.tablet) {
+    if (_store.default.config.width <= _deviceWidth.deviceWidth.tablet) {
       if (!mapOpen) {
         openMap();
         return;

package/build/components/RotationTab.js

@@ -90,9 +90,11 @@ var RotationTab = function RotationTab(_ref) {
     var newRotation = new _threesixty.default(container, {
       image: _toConsumableArray(images),
       parentElement: widgetTab,
-      inverted: true
+      inverted: true,
+      speed: 150
     });
     newRotation._update = updateRotation;
+    newRotation.play(true);
     var lastIndex = 0;
     var controller = (0, _panzoom.default)(container, {
       maxZoom: 3,
@@ -115,15 +117,6 @@ var RotationTab = function RotationTab(_ref) {
     setRotation(newRotation);
   };
 
-  var onEnd = function onEnd() {
-    rotation.controller.pause();
-    rotation.container.style.transform = 'none';
-    rotation.destroy();
-    setActiveIndex(0);
-    setRotation(null);
-    setInitState(false);
-  };
-
   var openInstructions = function openInstructions() {
     return setInstructionsState(true);
   };
@@ -140,15 +133,15 @@ var RotationTab = function RotationTab(_ref) {
       alt: "rotation-view-".concat(index),
       className: activeIndex === index ? 'active' : ''
     });
-  }))), !showInstructions && /*#__PURE__*/_react.default.createElement("button", {
+  }))), !initialized && !showInstructions && /*#__PURE__*/_react.default.createElement("button", {
     className: "widget-tab__threesixty-start",
-    onClick: initialized ? onEnd : openInstructions
+    onClick: openInstructions
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__threesixty-start-icon"
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: _rotation.default,
     alt: "start-icon"
-  })), /*#__PURE__*/_react.default.createElement("span", null, _locale.default.getLocaleText(initialized ? 'stop' : 'rotate'))), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
+  })), /*#__PURE__*/_react.default.createElement("span", null, _locale.default.getLocaleText('rotate'))), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
     disabled: disabled,
     steps: instructionSteps,
     onClick: onStart

package/build/components/Widget.js

@@ -11,9 +11,9 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _store = _interopRequireDefault(require("../store"));
 
-var _modelStore = _interopRequireDefault(require("../store/modelStore"));
+var _fullScreenStore = _interopRequireDefault(require("../store/fullScreenStore"));
 
-var _locale = _interopRequireDefault(require("../locale"));
+var _modelStore = _interopRequireDefault(require("../store/modelStore"));
 
 var _Application = _interopRequireDefault(require("./Application"));
 
@@ -35,6 +35,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var Widget = /*#__PURE__*/function () {
   function Widget(container) {
+    var _this = this;
+
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
     _classCallCheck(this, Widget);
@@ -45,16 +47,28 @@ var Widget = /*#__PURE__*/function () {
 
     var widgetContainer = document.querySelector(container);
     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));
+
+    if (!options.width) {
+      config.width = widgetContainer.offsetWidth;
+    }
+
+    if (!options.height) {
+      config.height = widgetContainer.offsetHeight;
+    }
+
     config.containerElement = widgetContainer;
 
     _store.default.setConfig(config);
 
-    _locale.default.setCurrentLocale(config.locale);
+    _fullScreenStore.default.resize(config);
+
+    if (config.resizable) {
+      window.addEventListener('resize', function () {
+        return _this.onResize();
+      });
+    }
 
-    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_Application.default, {
-      width: config.width,
-      height: config.height
-    }), widgetContainer);
+    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_Application.default, null), widgetContainer);
   }
 
   _createClass(Widget, [{
@@ -65,20 +79,42 @@ var Widget = /*#__PURE__*/function () {
   }, {
     key: "updateOptions",
     value: function updateOptions(config) {
-      var _this = this;
+      var _this2 = this;
 
       var newConfig = _objectSpread({}, config);
 
       this.requiredParams.forEach(function (param) {
         if (config[param]) return;
-        newConfig[param] = _this.options[param];
+        newConfig[param] = _this2.options[param];
       });
 
       _modelStore.default.removeHouse();
 
       _store.default.setConfig(newConfig);
 
-      _locale.default.setCurrentLocale(config.locale);
+      _fullScreenStore.default.resize(newConfig);
+    }
+  }, {
+    key: "updateSize",
+    value: function updateSize(size) {
+      var newConfig = _objectSpread(_objectSpread({}, this.options), size);
+
+      _modelStore.default.removeHouse();
+
+      _store.default.setConfig(newConfig);
+
+      _fullScreenStore.default.resize(newConfig);
+    }
+  }, {
+    key: "onResize",
+    value: function onResize() {
+      var _this$options$contain = this.options.containerElement,
+          width = _this$options$contain.offsetWidth,
+          height = _this$options$contain.offsetHeight;
+      this.updateSize({
+        width: width,
+        height: height
+      });
     }
   }, {
     key: "on",

package/build/config/defaultConfig.js

@@ -11,13 +11,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var defaultConfig = {
   tabs: ['rotation', 'panorama'],
+  name: null,
   logo: null,
   logoUrl: null,
-  width: null,
-  height: null,
+  resizable: true,
+  width: 1920,
+  height: 1080,
   planImage: null,
-  topView: null,
-  topDownView: null,
+  topViewImage: null,
+  rotationMode: 'default',
   rotationImages: [],
   panoramaImages: [],
   json: null,