hart-estate-widget 0.0.41 → 0.0.42

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

@@ -1,17 +1,51 @@
+@import '../mixin'
 @import '../vars'
 
 .widget-application
+  .widget-tab-buttons
+    position: absolute
+    z-index: 3
+    right: 44px
+    bottom: 35px
+    display: flex
+    align-items: center
+    justify-content: flex-end
+    @media #{$mobile}
+      right: 20px
+      bottom: 20px
+  .widget-tab-button
+    @include customButton
+    width: 72px
+    height: 72px
+    border-radius: 50%
+    display: flex
+    align-items: center
+    justify-content: center
+    background-color: $gray
+    color: $text-dark
+    font-size: 28px
+    line-height: 120%
+    font-weight: bold
+    margin-left: 40px
+    @media #{$tablet}
+      width: 60px
+      height: 60px
+      font-size: 24px
+      margin-left: 20px
+    @media #{$mobile}
+      margin-left: 10px
+    &--active
+      background-color: $mainColor
+
   .widget-tab
     width: 100%
     height: 100%
     display: flex
     align-items: center
     justify-content: center
-    padding: 60px 30px 125px 30px
+    padding: 60px 30px
     @media (max-width: 630px)
-      padding: 60px 15px 90px 15px
-    &--panes-hidden
-      padding: 60px 30px
+      padding: 60px 15px
     &__image
       max-width: 100%
       max-height: 100%
@@ -22,11 +56,47 @@
       height: 100%
       touch-action: none
       -webkit-touch-action: none
+      &-start
+        @include customButton
+        position: absolute
+        left: 50%
+        bottom: 35px
+        transform: translateX(-50%)
+        display: flex
+        align-items: center
+        justify-content: center
+        padding: 0 30px 0 27px
+        background-color: $gray
+        border-radius: 38px
+        height: 72px
+        @media #{$tablet}
+          height: 60px
+          width: 60px
+          padding: 0
+          left: 45px
+          transform: none
+        @media #{$mobile}
+          left: 20px
+          bottom: 20px
+        img
+          display: block
+          margin-right: 20px
+          position: relative
+          top: 2px
+          @media #{$tablet}
+            width: 30px
+            margin-right: 0
+        span
+          font-size: 24px
+          font-weight: bold
+          color: $text-dark
+          text-transform: uppercase
+          @media #{$tablet}
+            display: none
       &-container
         width: 100% !important
         height: 100% !important
         position: relative
-        cursor: move
         background-image: none !important
         img
           position: absolute
@@ -35,18 +105,16 @@
           transform: translate(-50%, -50%)
           max-width: 100%
           max-height: 100%
+          width: 600px
+          height: 600px
           object-fit: contain
+          opacity: 0
           @include noSelect
-    &--panorama,
-    &--model
-      .widget-tab__image
-        position: absolute
-        z-index: 1
-        left: 0
-        top: 0
-        width: 100%
-        height: 100%
-        object-fit: cover
+          &.active
+            opacity: 1
+      &--active
+        .widget-tab__threesixty-container
+          cursor: move
 
     &-menu
       position: absolute
@@ -77,7 +145,7 @@
           background-color: $mainColor
           padding: 5px 15px
           border-radius: 10px
-          font-size: .8rem
+          font-size: .7rem
           border: none
           cursor: pointer
           margin-bottom: 15px
@@ -99,85 +167,16 @@
                 display: none !important
             &[type=file]
               display: none
-          &:hover
-            box-shadow: 1px 1px 10px rgba(0, 0, 0, .15)
           &:nth-child(1)
             position: relative
             &::after
-              content: '|||'
-              transform: translateY(-50%) rotate(90deg)
-              font-size: 20px
-              line-height: 20px
-              margin-left: 10px
+              --bar-width: 2px
+              content: ''
+              width: 20px
+              height: 15px
               display: block
+              background: repeating-linear-gradient(180deg, $black, $black var(--bar-width), transparentize($black, 1) var(--bar-width), transparentize($black, 1) calc(var(--bar-width) * 3),)
               position: absolute
               right: 10px
               top: 50%
-
-  .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)
-      padding: 0 15px 15px 15px
-    .widget-tab-pane
-      width: 85px
-      height: 85px
-      border-radius: 5px
-      margin: 0 10px
-      background-color: $lightGray
-      cursor: pointer
-      border-width: 3px
-      border-style: solid
-      border-color: $lightGray
-      overflow: hidden
-      display: flex
-      align-items: center
-      justify-content: center
-      flex: none
-      transition: border .3s ease
-      position: relative
-      @include noSelect
-      @media (max-width: 630px)
-        width: 50px
-        height: 50px
-        margin: 0 5px
-      &::before
-        content: ''
-        position: absolute
-        left: 0
-        top: 0
-        width: 100%
-        height: 100%
-        box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .3)
-      &--active,
-      &:hover
-        border-color: $mainColor
-      &__image
-        width: 100%
-        height: 100%
-        object-fit: cover
-        object-position: center
-        display: block
-      &__icon
-        width: 16px
-        height: 16px
-        object-fit: contain
-        object-position: center
-        display: block
-        position: absolute
-        left: 10px
-        bottom: 8px
-        @media (max-width: 630px)
-          width: 12px
-          height: 12px
-          left: 5px
-          bottom: 3px
+              transform: translateY(-50%)

package/build/assets/sass/index.sass

@@ -1,4 +1,6 @@
+@import '../fonts/RobotoMono/RobotoMono.css'
 @import './vars'
+@import './mixin'
 
 *, *:before, *:after
   box-sizing: border-box
@@ -17,14 +19,55 @@ html, body
   overflow: hidden
   position: relative
   z-index: 1
+  background-color: $white
 
   *, *:before, *:after
-    font-family: 'Lato', sans-serif
+    font-family: 'Roboto Mono', sans-serif
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
     outline: none
-    font-weight: 400
+    font-weight: 700
     text-decoration: none
+    color: $text-dark
+
+  .widget-logo
+    position: absolute
+    left: 45px
+    top: 30px
+    z-index: 3
+    @media #{$mobile}
+      left: 20px
+      top: 20px
+    img
+      display: block
+      width: 82px
+      height: 82px
+      object-fit: contain
+      object-position: center
+      @media #{$tablet}
+        width: 65px
+        height: 65px
+
+  .widget-enter-fullscreen,
+  .widget-exit-fullscreen
+    position: absolute
+    right: 45px
+    top: 36px
+    z-index: 3
+    @include customButton
+    padding: 10px
+    @media #{$mobile}
+      right: 20px
+      top: 20px
+    img
+      display: block
+      width: 50px
+      height: 50px
+      object-fit: contain
+      object-position: center
+      @media #{$tablet}
+        width: 40px
+        height: 40px
 
   .widget-close
     position: absolute

package/build/assets/sass/mixin.sass

@@ -0,0 +1,12 @@
+@mixin customButton
+  ouline: none
+  border: none
+  box-shadow: none
+  background: transparent
+  cursor: pointer
+
+@mixin blurBackground($blur)
+  backdrop-filter: blur($blur)
+  -moz-backdrop-filter: blur($blur)
+  -webkit-backdrop-filter: blur($blur)
+  

package/build/assets/sass/vars.sass

@@ -5,8 +5,11 @@ $desktop: "only screen and (min-width: 1441px)"
 
 $white: #FFFFFF
 $black: #000000
+$gray: #EAEAEA
 $lightGray: #F4F7F7
-$mainColor: #FAD436
+$mainColor: #FAC62D
+
+$text-dark: #413E3E
 
 @mixin noSelect
   user-select: none

package/build/components/Application.js

@@ -7,15 +7,13 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.promise.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _mobxReactLite = require("mobx-react-lite");
 
 var _store = _interopRequireDefault(require("../store"));
 
-var _TabPanes = _interopRequireDefault(require("./TabPanes"));
+var _fullScreenStore = _interopRequireDefault(require("../store/fullScreenStore"));
 
 var _ImageTab = _interopRequireDefault(require("./ImageTab"));
 
@@ -25,9 +23,9 @@ var _PanoramaTab = _interopRequireDefault(require("./PanoramaTab"));
 
 var _ModelTab = _interopRequireDefault(require("./ModelTab"));
 
-var _TabWrapper = _interopRequireDefault(require("./TabWrapper"));
+var _FullScreenButton = _interopRequireDefault(require("./Buttons/FullScreenButton"));
 
-var _D = _interopRequireDefault(require("../assets/img/3D.jpg"));
+var _TabButton = _interopRequireDefault(require("./Buttons/TabButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -44,33 +42,6 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
     config
   } = _store.default;
   const [currentTab, setCurrentTab] = (0, _react.useState)(config.tabs[0]);
-  const [isTabPanesVisible, setTabPanesState] = (0, _react.useState)(true);
-
-  const showTabPanes = () => {
-    setTabPanesState(true);
-
-    _store.default.dispatchEvent('exitComponent');
-  };
-
-  const hideTabPanes = () => {
-    setTabPanesState(false);
-
-    _store.default.dispatchEvent('enterComponent');
-  };
-
-  const openPanorama = async () => {
-    try {
-      if (DeviceOrientationEvent.requestPermission) {
-        await DeviceOrientationEvent.requestPermission();
-      }
-    } catch (e) {
-      console.error(e);
-      console.log('Device motion not allowed');
-    }
-
-    hideTabPanes();
-  };
-
   const tabsList = {
     'planImage': /*#__PURE__*/_react.default.createElement(_ImageTab.default, {
       image: config.planImage,
@@ -84,39 +55,28 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
       image: config.topDownView,
       alt: "top-down-view"
     }),
-    'rotation': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
-      isActive: !isTabPanesVisible,
-      disabled: !config.rotationImages[0],
-      image: config.rotationImages[0],
-      title: "360\xB0 overview",
-      text: ['Use mouse to rotate', 'Shift + LMB to move'],
-      onStart: hideTabPanes
-    }, /*#__PURE__*/_react.default.createElement(_RotationTab.default, {
-      images: config.rotationImages
-    })),
-    'panorama': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
-      isActive: !isTabPanesVisible,
-      disabled: !_store.default.hallRoomImage,
-      image: _store.default.hallRoomImage,
-      title: "Panoramic tour",
-      text: ['Use mouse to rotate', 'To move through the rooms, click on the layout thumbnail'],
-      onStart: openPanorama
-    }, /*#__PURE__*/_react.default.createElement(_PanoramaTab.default, {
+    'rotation': /*#__PURE__*/_react.default.createElement(_RotationTab.default, {
+      images: config.rotationImages,
+      disabled: !config.rotationImages[0]
+    }),
+    'panorama': /*#__PURE__*/_react.default.createElement(_PanoramaTab.default, {
       json: config.json,
       planImage: config.planImage,
-      images: config.panoramaImages
-    })),
-    'model': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
-      isActive: !isTabPanesVisible,
-      disabled: !config.json,
-      image: _D.default,
-      title: "3D Model",
-      text: ['Use mouse to rotate', 'Use the right mouse button to move'],
-      onStart: hideTabPanes
-    }, /*#__PURE__*/_react.default.createElement(_ModelTab.default, {
-      json: config.json
-    }))
+      images: config.panoramaImages,
+      disabled: !config.panoramaImages.length
+    }),
+    'model': /*#__PURE__*/_react.default.createElement(_ModelTab.default, {
+      json: config.json,
+      disabled: !config.json
+    })
   };
+  const tabButtons = [{
+    tab: 'rotation',
+    text: '2D'
+  }, {
+    tab: 'panorama',
+    text: '3D'
+  }];
   const appStyle = {
     width,
     height
@@ -127,6 +87,8 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
   };
 
   (0, _react.useEffect)(() => {
+    _fullScreenStore.default.init();
+
     window.addEventListener('resize', setWindowHeight);
     setWindowHeight();
   }, []);
@@ -134,19 +96,34 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
     if (config.tabs.some(tab => tab === currentTab)) return;
     setCurrentTab(config.tabs[0]);
   }, [config, currentTab]);
+
+  const getTabButton = (button, index) => {
+    if (!_store.default.isTabIncluded(button.tab)) return null;
+    return /*#__PURE__*/_react.default.createElement(_TabButton.default, {
+      key: index,
+      text: button.text,
+      active: currentTab === button.tab,
+      onClick: () => setCurrentTab(button.tab)
+    });
+  };
+
   return /*#__PURE__*/_react.default.createElement("main", {
     className: "widget-application",
+    id: "widget-application",
     style: appStyle
   }, /*#__PURE__*/_react.default.createElement("section", {
-    className: "widget-tab widget-tab--".concat(currentTab, " widget-tab--panes-").concat(config.tabPanes ? 'visible' : 'hidden')
-  }, tabsList[currentTab]), config.tabPanes && isTabPanesVisible && /*#__PURE__*/_react.default.createElement(_TabPanes.default, {
-    currentTab: currentTab,
-    setCurrentTab: setCurrentTab
-  }), !isTabPanesVisible && /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: "widget-close",
-    onClick: showTabPanes
-  }, "Exit"));
+    className: "widget-tab widget-tab--".concat(currentTab)
+  }, tabsList[currentTab]), /*#__PURE__*/_react.default.createElement("a", {
+    className: "widget-logo",
+    href: config.logoUrl,
+    target: "_blank",
+    rel: "noreferrer"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: config.logo,
+    alt: "logo"
+  })), /*#__PURE__*/_react.default.createElement(_FullScreenButton.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab-buttons"
+  }, tabButtons.map(getTabButton)));
 });
 var _default = Application;
 exports.default = _default;

package/build/components/Buttons/FullScreenButton.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobxReactLite = require("mobx-react-lite");
+
+var _fullScreenStore = _interopRequireDefault(require("../../store/fullScreenStore"));
+
+var _enterFullscreen = _interopRequireDefault(require("../../assets/icons/enter-fullscreen.svg"));
+
+var _close = _interopRequireDefault(require("../../assets/icons/close.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FullScreenButton = (0, _mobxReactLite.observer)(() => {
+  if (!_fullScreenStore.default.enabled) {
+    return null;
+  }
+
+  if (_fullScreenStore.default.active) {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "widget-exit-fullscreen",
+      onClick: () => _fullScreenStore.default.exit()
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _close.default,
+      alt: "exit-fullscreen"
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "widget-enter-fullscreen",
+    onClick: () => _fullScreenStore.default.enter()
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _enterFullscreen.default,
+    alt: "enter-fullscreen"
+  }));
+});
+var _default = FullScreenButton;
+exports.default = _default;

package/build/components/Buttons/TabButton.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TabButton = _ref => {
+  let {
+    active,
+    text,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "widget-tab-button ".concat(active ? 'widget-tab-button--active' : ''),
+    onClick: onClick
+  }, text);
+};
+
+var _default = TabButton;
+exports.default = _default;

package/build/components/Instructions.js

@@ -11,28 +11,39 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const Instructions = _ref => {
   let {
-    title,
-    text,
-    disabled,
-    onClick
+    steps = [],
+    disabled = false,
+    onClick = () => {},
+    background = null
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-instructions"
+    className: "widget-instructions",
+    onClick: onClick,
+    style: {
+      backgroundImage: "url(".concat(background, ")")
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-instructions__content"
+    className: "widget-instructions__content",
+    onClick: e => e.stopPropagation()
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-instructions__head"
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-instructions__body"
-  }, text.map((row, index) => /*#__PURE__*/_react.default.createElement("p", {
-    key: index
-  }, row))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-instructions__footer"
-  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-instructions__steps"
+  }, steps.map((_ref2, index) => {
+    let {
+      text,
+      icon
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "widget-instructions__step",
+      key: index
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: icon,
+      alt: "step-icon"
+    }), /*#__PURE__*/_react.default.createElement("p", null, text));
+  })), /*#__PURE__*/_react.default.createElement("button", {
     disabled: disabled,
     onClick: onClick,
     type: "button"
-  }, "Start"))));
+  }, "\u041E\u043A")));
 };
 
 var _default = Instructions;