hart-estate-widget 0.0.64 → 0.0.67

package/build/assets/sass/components/panorama.sass

@@ -1,174 +0,0 @@
-@import '../mixin'
-@import '../vars'
-
-.widget-application
-  .widget-tab
-    &__panorama
-      width: 100%
-      height: 100%
-      position: absolute
-      left: 0
-      top: 0
-      z-index: 2
-      &-overlay
-        width: 100%
-        height: 100%
-        overflow: hidden
-        background: $white !important
-        *
-          display: none !important
-        canvas
-          display: block !important
-      &-controls
-        position: absolute
-        z-index: 2
-        left: 50%
-        bottom: 35px
-        display: flex
-        align-items: center
-        justify-content: center
-        padding: 8px
-        border-radius: 38px
-        background-color: transparentize($black, .8)
-        transform: translateX(-50%)
-        @include blurBackground(5px)
-        @include media($mobile)
-          padding: 5px
-        @include media($smallMobile)
-          bottom: 30px
-        &-button
-          @include customButton
-          width: 55px
-          height: 55px
-          border-radius: 50%
-          background-color: $white
-          display: flex
-          align-items: center
-          justify-content: center
-          margin-right: 18px
-          @include media($tablet)
-            width: 44px
-            height: 44px
-          @include media($mobile)
-            margin-right: 10px
-            width: 33px
-            height: 33px
-          @include media($smallMobile)
-            width: 26px
-            height: 26px
-          img
-            display: block
-            @include media($tablet)
-              transform: scale(.7)
-            @include media($mobile)
-              transform: scale(.52)
-            @include media($smallMobile)
-              transform: scale(.45)
-          &:nth-last-child(1)
-            margin-right: 0
-      &-close-map
-        z-index: 4
-      &-map
-        position: absolute
-        left: 45px
-        bottom: 35px
-        z-index: 3
-        border-radius: 10px
-        opacity: 1
-        transition: opacity .5s
-        @include noTouch
-        &::before
-          content: ''
-          position: absolute
-          z-index: -1
-          left: 50%
-          top: 50%
-          transform: translate(-50%, -50%)
-          width: calc(100% + 16px)
-          height: calc(100% + 16px)
-          border-radius: inherit
-          background-color: $white
-        @include media($tablet)
-          left: 20px
-          transform: scale(.6)
-          transform-origin: 0% 100%
-        @include media($mobile)
-          transform: scale(.4)
-        @include media($smallMobile)
-          bottom: 30px
-          transform: scale(.35)
-        &--scaled
-          @include media($tablet)
-            transform: scale(1.4) translate(-50%, 50%)
-            left: 50%
-            bottom: 50%
-            &::after
-              content: ''
-              position: absolute
-              z-index: -2
-              left: 50%
-              top: 50%
-              transform: translate(-50%, -50%)
-              width: 100vw
-              height: 100vh
-              background-color: transparentize(#C4C4C4, .2)
-            svg
-              polygon
-                &:active
-                  opacity: .3 !important
-          @include media($mobile)
-            transform: scale(1) translate(-50%, 50%)
-        &--hidden
-          opacity: 0
-          pointer-events: none
-        img
-          width: 200px
-          border-radius: none
-          display: block
-          @include noSelect
-          @include highResolution
-          &:hover
-            box-shadow: 1px 1px 10px rgba(0,0,0,0.15)
-        svg
-          position: absolute
-          left: 0
-          top: 0
-          width: 200px
-          height: 100%
-          z-index: 3
-          display: block
-          border-radius: inherit
-          polygon
-            opacity: 0
-            fill: $mainColor
-            cursor: pointer
-            &:hover
-              opacity: .3
-        &__fov
-          position: absolute
-          left: 0
-          top: 0
-          width: 0px
-          height: 0px
-          border-radius: 50%
-          border-left: 30px solid transparentize($mainColor, 1)
-          border-right: 30px solid transparentize($mainColor, 1)
-          border-bottom: 30px solid transparentize($mainColor, 1)
-          border-top: 40px solid transparentize($mainColor, .6)
-          transform: translate(-50%, -50%) rotate(0rad)
-          transform-origin: 50% 50%
-          z-index: 4
-          pointer-events: none
-          &::before
-            content: ''
-            position: absolute
-            z-index: 5
-            left: 50%
-            top: 50%
-            transform: translate(-50%, -50%) translateY(-5px)
-            width: 15px
-            height: 15px
-            background-color: $mainColor
-            border-radius: 50%
-            border: 2px solid $mainColor
-            box-shadow: inset 0 0 0 2px #ffffff

package/build/assets/sass/components/rotation.sass

@@ -1,106 +0,0 @@
-@import '../mixin'
-@import '../vars'
-
-.widget-application
-  .widget-tab
-    &__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
-        @include media($tablet)
-          height: 60px
-          width: 166px
-          padding: 0 20px 0 8px
-          bottom: 35px
-        @include media($mobile)
-          height: 44px
-          width: 115px
-          padding: 0 10px 0 6px
-        @include media($smallMobile)
-          height: 36px
-          width: 85px
-          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
-          @include media($tablet)
-            padding: 7px
-            margin-right: 15px
-          @include media($mobile)
-            margin-right: 7px
-          @include media($smallMobile)
-            padding: 6px
-            margin-right: 5px
-          img
-            display: block
-            position: relative
-            top: 2px
-            width: 34px
-            @include media($tablet)
-              width: 30px
-              top: 1px
-            @include media($mobile)
-              width: 19px
-              top: 0
-            @include media($smallMobile)
-              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
-          @include media($tablet)
-            font-size: 20px
-          @include media($mobile)
-            font-size: 14px
-          @include media($smallMobile)
-            font-size: 10px
-            top: 0
-      &-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

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

@@ -1,121 +0,0 @@
-@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
-    @include media($tablet)
-      right: 20px
-      bottom: 35px
-    @include media($smallMobile)
-      bottom: 30px
-  .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
-    @include media($tablet)
-      margin-left: 20px
-      width: 60px
-      height: 60px
-      font-size: 22px
-    @include media($mobile)
-      margin-left: 10px
-      font-size: 17px
-      width: 44px
-      height: 44px
-    @include media($smallMobile)
-      width: 36px
-      height: 36px
-      font-size: 14px
-    &--active
-      background-color: $mainColor
-
-  .widget-tab
-    width: 100%
-    height: 100%
-    display: flex
-    align-items: center
-    justify-content: center
-    padding: 60px 30px
-    @include media($smallMobile)
-      padding: 60px 20px
-    &-menu
-      position: absolute
-      z-index: 3
-      left: 15px
-      top: 15px
-      max-height: 100%
-      overflow-y: auto
-      padding-bottom: 30px
-      &__wallpapers
-        display: flex
-        flex-wrap: wrap
-        align-items: flex-start
-        margin-top: 10px
-        width: 100%
-        img
-          width: 30px
-          height: 30px
-          display: block
-          object-fit: cover
-          cursor: pointer
-          margin-right: 10px
-          margin-block-end: 10px
-      ul
-        list-style-type: none
-        li
-          color: $text-dark
-          background-color: $mainColor
-          padding: 5px 15px
-          border-radius: 10px
-          font-size: .7rem
-          border: none
-          cursor: pointer
-          margin-bottom: 15px
-          width: 200px
-          @include noSelect
-          label
-            display: flex
-            cursor: inherit
-            width: 100%
-          input
-            &[type=color]
-              cursor: pointer
-              margin-left: auto
-              width: 50px
-              height: 20px
-              border: 0
-              border-radius: 5px
-              &::-webkit-color-swatch-wrapper
-                display: none !important
-            &[type=file]
-              display: none
-          &:nth-child(1)
-            position: relative
-            &::after
-              --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%
-              transform: translateY(-50%)

package/build/assets/sass/index.sass

@@ -1,65 +0,0 @@
-@import './vars'
-@import './mixin'
-
-.widget-application
-  width: 100%
-  height: 100%
-  flex: none
-  overflow: hidden
-  position: relative
-  z-index: 1
-  background-color: $white
-  font-size: 20px
-
-  *, *:before, *:after
-    -webkit-font-smoothing: antialiased
-    -moz-osx-font-smoothing: grayscale
-    font-family: 'Roboto Mono', sans-serif
-    text-decoration: none
-    font-weight: 700
-    color: $text-dark
-    outline: none
-    padding: 0
-    margin: 0
-    box-sizing: border-box
-    -webkit-box-sizing: border-box
-
-  .widget-logo
-    position: absolute
-    left: 45px
-    top: 30px
-    z-index: 3
-    @include media($tablet)
-      left: 20px
-      top: 30px
-    @include media($smallMobile)
-      top: 25px
-    img
-      display: block
-      width: 82px
-      height: 82px
-      object-fit: contain
-      object-position: center
-      @include media($tablet)
-        width: 65px
-        height: 65px
-      @include media($mobile)
-        width: 42px
-        height: 42px
-      @include media($smallMobile)
-        width: 36px
-        height: 36px
-
-  .widget-tab__panorama-close-map
-    @include rightActionButton
-  .widget-enter-fullscreen
-    @include rightActionButton
-  .widget-exit-fullscreen
-    @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

@@ -1,48 +0,0 @@
-@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)
-
-@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,28 +0,0 @@
-$smallMobile: "smallMobile"
-$mobile: "mobile"
-$tablet: "tablet"
-$laptop: "laptop"
-
-$white: #FFFFFF
-$black: #000000
-$gray: #EAEAEA
-$lightGray: #F4F7F7
-$mainColor: #FAC62D
-
-$text-dark: #413E3E
-
-@mixin noSelect
-  user-select: none
-  -webkit-user-select: none
-  user-drag: none
-  -webkit-user-drag: none
-
-@mixin noTouch
-  touch-action: none
-  -webkit-touch-action: none
-
-@mixin highResolution
-  -webkit-backface-visibility: hidden
-  -ms-transform: translateZ(0)
-  -webkit-transform: translateZ(0)
-  transform: translateZ(0)

package/build/components/Application.js

@@ -1,132 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mobxReactLite = require("mobx-react-lite");
-
-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"));
-
-var _ModelTab = _interopRequireDefault(require("./ModelTab"));
-
-var _FullScreenButton = _interopRequireDefault(require("./Buttons/FullScreenButton"));
-
-var _TabButton = _interopRequireDefault(require("./Buttons/TabButton"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var Application = (0, _mobxReactLite.observer)(function () {
-  var config = _store.default.config;
-  var appStyle = {
-    width: config.width,
-    height: config.height
-  };
-
-  var _useState = (0, _react.useState)(config.tabs[0]),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentTab = _useState2[0],
-      setCurrentTab = _useState2[1];
-
-  var tabsList = {
-    '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,
-      disabled: !config.panoramaImages.length
-    }),
-    'model': /*#__PURE__*/_react.default.createElement(_ModelTab.default, {
-      json: config.json,
-      disabled: !config.json
-    })
-  };
-  var tabButtons = [{
-    tab: 'rotation',
-    text: '2D'
-  }, {
-    tab: 'panorama',
-    text: '3D'
-  }];
-  (0, _react.useEffect)(function () {
-    _fullScreenStore.default.init();
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (config.tabs.some(function (tab) {
-      return tab === currentTab;
-    })) return;
-    setCurrentTab(config.tabs[0]);
-  }, [config, currentTab]);
-
-  var getTabButton = function getTabButton(button, index) {
-    if (!_store.default.isTabIncluded(button.tab) || _store.default.config.tabs.length < 2) return null;
-    if (!_store.default.controlsVisible) return null;
-    return /*#__PURE__*/_react.default.createElement(_TabButton.default, {
-      key: index,
-      text: button.text,
-      active: currentTab === button.tab,
-      onClick: function onClick() {
-        return setCurrentTab(button.tab);
-      }
-    });
-  };
-
-  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: getAppClass(),
-    id: "widget-application",
-    style: appStyle
-  }, /*#__PURE__*/_react.default.createElement("section", {
-    className: "widget-tab widget-tab--".concat(currentTab)
-  }, tabsList[currentTab]), config.logo && /*#__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"
-  })), _store.default.controlsVisible && /*#__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;