hart-estate-widget 0.0.3 → 0.0.7

package/build/assets/sass/index.sass

@@ -5,12 +5,6 @@
   -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
@@ -23,6 +17,15 @@ html, body
   overflow: hidden
   position: relative
   z-index: 1
+
+  *, *:before, *:after
+    font-family: 'Lato', sans-serif
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+    outline: none
+    font-weight: 400
+    text-decoration: none
+
   .widget-close
     position: absolute
     display: flex

package/build/{Application.js → components/Application.js}

@@ -11,17 +11,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobxReactLite = require("mobx-react-lite");
 
-var _store = _interopRequireDefault(require("./store"));
+var _store = _interopRequireDefault(require("../store"));
 
-var _TabPanes = _interopRequireDefault(require("./components/TabPanes"));
+var _TabPanes = _interopRequireDefault(require("./TabPanes"));
 
-var _ImageTab = _interopRequireDefault(require("./components/ImageTab"));
+var _ImageTab = _interopRequireDefault(require("./ImageTab"));
 
-var _RotationTab = _interopRequireDefault(require("./components/RotationTab"));
+var _RotationTab = _interopRequireDefault(require("./RotationTab"));
 
-var _TabWrapper = _interopRequireDefault(require("./components/TabWrapper"));
+var _TabWrapper = _interopRequireDefault(require("./TabWrapper"));
 
-var _D = _interopRequireDefault(require("./assets/img/3D.jpg"));
+var _D = _interopRequireDefault(require("../assets/img/3D.jpg"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/build/components/RotationTab.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _panzoom = _interopRequireDefault(require("panzoom"));
 
-var _threesixty = _interopRequireDefault(require("../lib/threesixty"));
+var _threesixty = _interopRequireDefault(require("../threesixty"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/build/{Widget.js → components/Widget.js}

@@ -11,24 +11,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _store = _interopRequireDefault(require("./store"));
+var _store = _interopRequireDefault(require("../store"));
 
 var _Application = _interopRequireDefault(require("./Application"));
 
-var _defaultConfig = _interopRequireDefault(require("./defaultConfig"));
-
-require("./assets/sass/index.sass");
+var _defaultConfig = _interopRequireDefault(require("../config/defaultConfig"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 class Widget {
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(container) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const config = Object.assign(_defaultConfig.default, options);
-    const {
-      container
-    } = config;
-    const widgetContainer = document.getElementById(container);
+    const 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));
     config.containerElement = widgetContainer;
 

package/build/{defaultConfig.js → config/defaultConfig.js}

@@ -10,7 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultConfig = {
-  container: 'widget-container',
   tabs: ['planImage', 'topView', 'topDownView', 'rotation', 'panorama', 'model'],
   tabPanes: true,
   width: null,

package/build/index.css

@@ -0,0 +1,245 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  font-size: 20px;
+}
+
+.widget-application {
+  --vh: 100vh;
+  width: 100%;
+  height: calc(100 * var(--vh));
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+.widget-application *, .widget-application *:before, .widget-application *:after {
+  font-family: "Lato", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  outline: none;
+  font-weight: 400;
+  text-decoration: none;
+}
+.widget-application .widget-close {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+  right: 15px;
+  top: 15px;
+  color: #000000;
+  background-color: #FAD436;
+  padding: 5px 15px;
+  border-radius: 10px;
+  font-size: 0.8rem;
+  border: none;
+  cursor: pointer;
+}
+.widget-application .widget-close:hover {
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
+}
+
+.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) {
+  .widget-application .widget-tab {
+    padding: 60px 15px 90px 15px;
+  }
+}
+.widget-application .widget-tab--panes-hidden {
+  padding: 60px 30px;
+}
+.widget-application .widget-tab__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+}
+.widget-application .widget-tab__threesixty {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  -webkit-touch-action: none;
+}
+.widget-application .widget-tab__threesixty-container {
+  width: 100% !important;
+  height: 100% !important;
+  position: relative;
+  cursor: move;
+  background-image: none !important;
+}
+.widget-application .widget-tab__threesixty-container img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  user-drag: none;
+  -webkit-user-drag: none;
+}
+.widget-application .widget-tab--panorama .widget-tab__image, .widget-application .widget-tab--model .widget-tab__image {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.widget-application .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) {
+  .widget-application .widget-tab-panes {
+    padding: 0 15px 15px 15px;
+  }
+}
+.widget-application .widget-tab-panes .widget-tab-pane {
+  width: 85px;
+  height: 85px;
+  border-radius: 5px;
+  margin: 0 10px;
+  background-color: #F4F7F7;
+  cursor: pointer;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #F4F7F7;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  transition: border 0.3s ease;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  user-drag: none;
+  -webkit-user-drag: none;
+}
+@media (max-width: 630px) {
+  .widget-application .widget-tab-panes .widget-tab-pane {
+    width: 50px;
+    height: 50px;
+    margin: 0 5px;
+  }
+}
+.widget-application .widget-tab-panes .widget-tab-pane::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.3);
+}
+.widget-application .widget-tab-panes .widget-tab-pane--active, .widget-application .widget-tab-panes .widget-tab-pane:hover {
+  border-color: #FAD436;
+}
+.widget-application .widget-tab-panes .widget-tab-pane__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+.widget-application .widget-tab-panes .widget-tab-pane__icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  object-position: center;
+  display: block;
+  position: absolute;
+  left: 10px;
+  bottom: 8px;
+}
+@media (max-width: 630px) {
+  .widget-application .widget-tab-panes .widget-tab-pane__icon {
+    width: 12px;
+    height: 12px;
+    left: 5px;
+    bottom: 3px;
+  }
+}
+
+.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);
+}
+.widget-application .widget-instructions__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background-color: #FFFFFF;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  overflow: hidden;
+  width: 350px;
+}
+.widget-application .widget-instructions__head {
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #d1d1d1;
+  color: rgba(74, 74, 74, 0.7);
+  text-align: center;
+  font-size: 0.8rem;
+}
+.widget-application .widget-instructions__body {
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  font-size: 0.7rem;
+}
+.widget-application .widget-instructions__body p {
+  margin: 10px 0;
+}
+.widget-application .widget-instructions__footer {
+  width: 100%;
+}
+.widget-application .widget-instructions__footer button {
+  width: 100%;
+  background-color: #FAD436;
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-align: center;
+  color: #000000;
+  cursor: pointer;
+  border: none;
+  padding: 10px 5px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/build/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/assets/sass/index.sass","../src/assets/sass/vars.sass","../src/assets/sass/components/tabs.sass","../src/assets/sass/components/instructions.sass"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OC9BI;ED+BJ,kBC7BQ;ED8BR;EACA;EACA;EACA;EACA;;AACA;EACE;;;AEzCJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EAPF;IAQI;;;AACF;EACE;;AACF;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ED1BR;EACA;EACA;EACA;;AC2BI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAZF;IAaI;;;AACF;EACE;EACA;EACA;EACA;EACA,kBD9DM;EC+DN;EACA;EACA;EACA,cDlEM;ECmEN;EACA;EACA;EACA;EACA;EACA;EACA;EDrEJ;EACA;EACA;EACA;;ACoEI;EAlBF;IAmBI;IACA;IACA;;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACF;EAEE,cDxFI;;ACyFN;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EATF;IAUI;IACA;IACA;IACA;;;;ACjHR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA,kBFdE;EEeF;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACJ;EACE;;AACA;EACE;EACA,kBFlCI;EEmCJ;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}

package/build/index.js

@@ -1,24 +1,49 @@
 "use strict";
 
-require("core-js/modules/web.dom-collections.iterator.js");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _Widget = _interopRequireDefault(require("./Widget"));
-
-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; }
-
-const App = () => {
-  (0, _react.useEffect)(() => new _Widget.default(), []);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: "widget-container"
-  });
-};
-
-_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(App, null)), document.getElementById('root'));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImageTab", {
+  enumerable: true,
+  get: function get() {
+    return _ImageTab.ImageTab;
+  }
+});
+Object.defineProperty(exports, "Instructions", {
+  enumerable: true,
+  get: function get() {
+    return _Instructions.Instructions;
+  }
+});
+Object.defineProperty(exports, "RotationTab", {
+  enumerable: true,
+  get: function get() {
+    return _RotationTab.RotationTab;
+  }
+});
+Object.defineProperty(exports, "TabWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _TabWrapper.TabWrapper;
+  }
+});
+Object.defineProperty(exports, "Widget", {
+  enumerable: true,
+  get: function get() {
+    return _Widget.default;
+  }
+});
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Widget = _interopRequireDefault(require("./components/Widget"));
+
+var _ImageTab = require("./components/ImageTab");
+
+var _Instructions = require("./components/Instructions");
+
+var _RotationTab = require("./components/RotationTab");
+
+var _TabWrapper = require("./components/TabWrapper");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -2,28 +2,30 @@
   "name": "hart-estate-widget",
   "description": "HART Estate widget",
   "author": "HART",
-  "keywords": ["react", "hart", "widget", "estate"],
-  "version": "0.0.3",
+  "keywords": [],
+  "version": "0.0.7",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",
-  "files": [ "build", "README.md" ],
+  "files": [
+    "build",
+    "README.md"
+  ],
   "repository": {
-      "type": "git",
-      "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
+    "type": "git",
+    "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files"
+    "start": "babel src --watch --out-dir build && npm run build:sass",
+    "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files && npm run build:sass",
+    "build:sass": "sass src/assets/sass/index.sass:build/index.css"
   },
   "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"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.0",
@@ -33,7 +35,6 @@
     "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"
   },
   "browserslist": {