hart-estate-widget 1.0.1 → 1.1.3

package/build/widget.module.js.LICENSE.txt

@@ -0,0 +1,43 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+//!\ DECLARE ALIAS AFTER assign prototype !

package/package.json

@@ -3,59 +3,64 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [
-    "react",
-    "hart",
+    "estate",
     "widget",
-    "estate"
+    "hart"
   ],
-  "version": "1.0.1",
+  "sideEffects": [
+    "*.sass"
+  ],
+  "version": "1.1.3",
   "private": false,
-  "main": "build/index.js",
-  "module": "build/index.js",
+  "main": "build/widget.module.js",
+  "module": "build/widget.module.js",
   "files": [
     "build",
     "README.md"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
+  "engines": {
+    "node": "^16.13.1"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "mobx": "^6.3.13",
-    "mobx-react-lite": "^3.2.3",
-    "panzoom": "^9.4.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.0"
+    "cleanup": "rm -rf build",
+    "start": "npm run cleanup && webpack-dev-server --config webpack-development.config.js",
+    "build": "npm run cleanup && webpack --config webpack-production.config.js",
+    "local-tunnel": "Lt --port 9000 --subdomain estate-widget --local-host localhost"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
     "@babel/core": "^7.17.0",
     "@babel/eslint-parser": "^7.16.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.6.0",
     "eslint": "^8.0.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-react": "^7.28.0",
-    "rewire": "^6.0.0",
-    "sass": "^1.46.0"
+    "path": "^0.12.7",
+    "sass": "^1.46.0",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.7.4",
+    "@fontsource/roboto-mono": "^4.5.8",
+    "geometric": "^2.2.10",
+    "mobx": "^6.3.13",
+    "mobx-react-lite": "^3.2.3",
+    "panolens": "^0.12.1",
+    "panzoom": "^9.4.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-select": "^5.7.2",
+    "screenfull": "^6.0.1",
+    "ua-parser-js": "^1.0.2"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ]
 }

package/build/Application.js

@@ -1,107 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-var _react = require("react");
-
-var _mobxReactLite = require("mobx-react-lite");
-
-var _store = _interopRequireDefault(require("store"));
-
-var _TabPanes = _interopRequireDefault(require("components/TabPanes"));
-
-var _ImageTab = _interopRequireDefault(require("components/ImageTab"));
-
-var _RotationTab = _interopRequireDefault(require("components/RotationTab"));
-
-var _TabWrapper = _interopRequireDefault(require("components/TabWrapper"));
-
-var _D = _interopRequireDefault(require("assets/img/3D.jpg"));
-
-var _react2 = require("react/cjs/react.development");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Application = (0, _mobxReactLite.observer)(_ref => {
-  let {
-    width,
-    height
-  } = _ref;
-  const {
-    config
-  } = _store.default;
-  const [currentTab, setCurrentTab] = (0, _react.useState)(config.tabs[0]);
-  const [isTabPanesVisible, setTabPanesState] = (0, _react.useState)(true);
-
-  const showTabPanes = () => setTabPanesState(true);
-
-  const hideTabPanes = () => setTabPanesState(false);
-
-  const tabsList = {
-    'planImage': /*#__PURE__*/React.createElement(_ImageTab.default, {
-      image: config.planImage
-    }),
-    'topView': /*#__PURE__*/React.createElement(_ImageTab.default, {
-      image: config.topView
-    }),
-    'topDownView': /*#__PURE__*/React.createElement(_ImageTab.default, {
-      image: config.topDownView
-    }),
-    'rotation': /*#__PURE__*/React.createElement(_TabWrapper.default, {
-      isActive: !isTabPanesVisible,
-      image: config.rotationImages[0],
-      title: "360\xB0 overview",
-      text: ['Use mouse to rotate', 'Shift + LMB to move'],
-      onStart: hideTabPanes
-    }, /*#__PURE__*/React.createElement(_RotationTab.default, {
-      images: config.rotationImages
-    })),
-    'panorama': /*#__PURE__*/React.createElement(_TabWrapper.default, {
-      isActive: !isTabPanesVisible,
-      image: config.panoramaImages[0],
-      title: "Panoramic tour",
-      text: ['Use mouse to rotate', 'To move through the rooms, click on the layout thumbnail'],
-      onStart: hideTabPanes
-    }, /*#__PURE__*/React.createElement("p", null, "Work in progress")),
-    'model': /*#__PURE__*/React.createElement(_TabWrapper.default, {
-      isActive: !isTabPanesVisible,
-      image: _D.default,
-      title: "3D Model",
-      text: ['Use mouse to rotate', 'Use the right mouse button to move'],
-      onStart: hideTabPanes
-    }, /*#__PURE__*/React.createElement("p", null, "Work in progress"))
-  };
-  const appStyle = {
-    width,
-    height
-  };
-
-  const setWindowHeight = () => {
-    document.querySelector('.widget-application').style.setProperty('--vh', window.innerHeight / 100 + 'px');
-  };
-
-  (0, _react2.useEffect)(() => {
-    window.addEventListener('resize', setWindowHeight);
-    setWindowHeight();
-  }, []);
-  return /*#__PURE__*/React.createElement("main", {
-    className: "widget-application",
-    style: appStyle
-  }, /*#__PURE__*/React.createElement("section", {
-    className: "widget-tab widget-tab--".concat(currentTab, " widget-tab--panes-").concat(config.tabPanes ? 'visible' : 'hidden')
-  }, tabsList[currentTab]), config.tabPanes && isTabPanesVisible && /*#__PURE__*/React.createElement(_TabPanes.default, {
-    currentTab: currentTab,
-    setCurrentTab: setCurrentTab
-  }), config.tabPanes && !isTabPanesVisible && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "widget-close",
-    onClick: showTabPanes
-  }, "Exit"));
-});
-var _default = Application;
-exports.default = _default;

package/build/Widget.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.object.assign.js");
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _store = _interopRequireDefault(require("./store"));
-
-var _Application = _interopRequireDefault(require("./Application"));
-
-var _defaultConfig = _interopRequireDefault(require("./defaultConfig"));
-
-require("./assets/sass/index.sass");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class Widget {
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const config = Object.assign(_defaultConfig.default, options);
-    const {
-      container
-    } = config;
-    const widgetContainer = document.getElementById(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));
-    config.containerElement = widgetContainer;
-
-    _store.default.setConfig(config);
-
-    _reactDom.default.render( /*#__PURE__*/React.createElement(_Application.default, {
-      width: config.width,
-      height: config.height
-    }), widgetContainer);
-  }
-
-}
-
-var _default = Widget;
-exports.default = _default;

package/build/assets/img/refresh-icon.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 438.529 438.528">
-  <g>
-    <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>
-    <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>
-  </g>
-</svg>

package/build/assets/sass/components/instructions.sass

@@ -1,50 +0,0 @@
-@import '../vars'
-
-.widget-application
-  .widget-instructions
-    position: absolute
-    z-index: 2
-    left: 0
-    top: 0
-    width: 100%
-    height: 100%
-    display: flex
-    align-items: center
-    justify-content: center
-    background-color: rgba(0, 0, 0, 0.3)
-    &__content
-      display: flex
-      flex-direction: column
-      align-items: flex-start
-      justify-content: flex-start
-      background-color: $white
-      box-shadow: 1px 1px 10px rgb(0 0 0 / 50%)
-      border-radius: 5px
-      overflow: hidden
-      width: 350px
-    &__head
-      width: 100%
-      padding: 10px
-      border-bottom: 1px solid #d1d1d1
-      color: rgba(74, 74, 74, .7)
-      text-align: center
-      font-size: .8rem
-    &__body
-      width: 100%
-      padding: 10px
-      text-align: center
-      font-size: .7rem
-      p
-        margin: 10px 0
-    &__footer
-      width: 100%
-      button
-        width: 100%
-        background-color: $mainColor
-        font-size: .8rem
-        font-weight: 500
-        text-align: center
-        color: #000000
-        cursor: pointer
-        border: none
-        padding: 10px 5px

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

@@ -1,117 +0,0 @@
-@import '../vars'
-
-.widget-application
-  .widget-tab
-    width: 100%
-    height: 100%
-    display: flex
-    align-items: center
-    justify-content: center
-    padding: 60px 30px 125px 30px
-    @media (max-width: 630px)
-      padding: 60px 15px 90px 15px
-    &--panes-hidden
-      padding: 60px 30px
-    &__image
-      max-width: 100%
-      max-height: 100%
-      object-fit: contain
-      display: block
-    &__threesixty
-      width: 100%
-      height: 100%
-      touch-action: none
-      -webkit-touch-action: none
-      &-container
-        width: 100% !important
-        height: 100% !important
-        position: relative
-        cursor: move
-        background-image: none !important
-        img
-          position: absolute
-          left: 50%
-          top: 50%
-          transform: translate(-50%, -50%)
-          max-width: 100%
-          max-height: 100%
-          object-fit: contain
-          @include noSelect
-    &--panorama,
-    &--model
-      .widget-tab__image
-        position: absolute
-        z-index: 1
-        left: 0
-        top: 0
-        width: 100%
-        height: 100%
-        object-fit: cover
-
-  .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 rgb(0 0 0 / 30%)
-      &--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

package/build/assets/sass/index.sass

@@ -1,45 +0,0 @@
-@import './vars'
-
-*, *:before, *:after
-  box-sizing: border-box
-  -webkit-box-sizing: border-box
-  margin: 0
-  padding: 0
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale
-  outline: none
-  font-family: 'Lato', sans-serif
-  font-weight: 400
-  text-decoration: none
-
-html, body
-  font-size: 20px
-
-.widget-application
-  --vh: 100vh
-
-  width: 100%
-  height: calc(100 * var(--vh))
-  overflow: hidden
-  position: relative
-  z-index: 1
-  .widget-close
-    position: absolute
-    display: flex
-    align-items: center
-    justify-content: center
-    z-index: 3
-    right: 15px
-    top: 15px
-    color: $black
-    background-color: $mainColor
-    padding: 5px 15px
-    border-radius: 10px
-    font-size: .8rem
-    border: none
-    cursor: pointer
-    &:hover
-      box-shadow: 1px 1px 10px rgb(0 0 0 / 15%)
-
-@import './components/tabs'
-@import './components/instructions'

package/build/assets/sass/vars.sass

@@ -1,15 +0,0 @@
-$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)"
-
-$white: #FFFFFF
-$black: #000000
-$lightGray: #F4F7F7
-$mainColor: #FAD436
-
-@mixin noSelect
-  user-select: none
-  -webkit-user-select: none
-  user-drag: none
-  -webkit-user-drag: none

package/build/components/ImageTab.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-const ImageTab = _ref => {
-  let {
-    image
-  } = _ref;
-  return /*#__PURE__*/React.createElement("img", {
-    className: "widget-tab__image",
-    src: image,
-    alt: "plan-view"
-  });
-};
-
-var _default = ImageTab;
-exports.default = _default;

package/build/components/Instructions.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-const Instructions = _ref => {
-  let {
-    title,
-    text,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "widget-instructions"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "widget-instructions__content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "widget-instructions__head"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "widget-instructions__body"
-  }, text.map((row, index) => /*#__PURE__*/React.createElement("p", {
-    key: index
-  }, row))), /*#__PURE__*/React.createElement("div", {
-    className: "widget-instructions__footer"
-  }, /*#__PURE__*/React.createElement("button", {
-    onClick: onClick,
-    type: "button"
-  }, "Start"))));
-};
-
-var _default = Instructions;
-exports.default = _default;

package/build/components/RotationTab.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-var _react = require("react");
-
-var _threesixty = _interopRequireDefault(require("lib/threesixty"));
-
-var _panzoom = _interopRequireDefault(require("panzoom"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const RotationTab = _ref => {
-  let {
-    images
-  } = _ref;
-  const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    const container = document.querySelector('.widget-tab__threesixty-container');
-    const widgetTab = document.querySelector('.widget-tab');
-    const rotation = new _threesixty.default(container, {
-      image: images.map(img => img),
-      parentElement: widgetTab,
-      inverted: true
-    });
-
-    rotation._update = () => setActiveIndex(rotation.index);
-
-    let lastIndex = 0;
-    const controller = (0, _panzoom.default)(container, {
-      maxZoom: 3,
-      minZoom: 0.5,
-      beforeMouseDown: e => !e.shiftKey
-    });
-    controller.on('panstart', () => {
-      lastIndex = rotation.index;
-
-      rotation._update = () => {};
-    });
-    controller.on('panend', () => {
-      rotation.goto(lastIndex);
-
-      rotation._update = () => setActiveIndex(rotation.index);
-    });
-  }, [images]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "widget-tab__threesixty"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "widget-tab__threesixty-container"
-  }, images.map((img, index) => /*#__PURE__*/React.createElement("img", {
-    src: img,
-    key: index,
-    alt: "rotation-view-".concat(index),
-    style: {
-      opacity: activeIndex === index ? 1 : 0
-    }
-  }))));
-};
-
-var _default = RotationTab;
-exports.default = _default;