hart-estate-widget 0.0.4 → 0.0.8

package/README.md

@@ -1,7 +1,26 @@
-# Компонент HART Estate
+# Компонент HART Estate Widget
 
-## Список доступных команд
 
-### `npm start` - запуск приложения
+## Способ установки с помощью NPM:
 
-### `npm run build` - билд приложения
+### `npm install hart-estate-widget`
+
+
+
+## Пример использования:
+
+
+### `const myWidget = new Widget('#container', options);`
+
+
+## Параметры по умолчанию:
+
+####  `tabs: ['planImage', 'topView', 'topDownView', 'rotation', 'panorama', 'model']` - Элементы, которые необходимо активировать
+####  `tabPanes: true` - Показывать / Скрывать навигационную панель
+####  `width: null` - Ширина компонента (по умолчанию 100%)
+####  `height: null` - Высота компонента (по умолчанию 100vh)
+####  `planImage: ''` - Путь к изображению планировки
+####  `topView: ''` - Путь к изображению модели сверху
+####  `topDownView: ''` - Путь к изображению модели сверху под углом
+####  `rotationImages: []` - Массив изображений для 360 визуализатора
+####  `panoramaImages: []` - Массив изображений сфер для виртуальной панорамы

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/components/Widget.js

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

package/build/index.css

@@ -0,0 +1 @@
+*,*: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:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(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 .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,.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,.3)}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:#fff;box-shadow:1px 1px 10px rgba(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,.7);text-align:center;font-size:.8rem}.widget-application .widget-instructions__body{width:100%;padding:10px;text-align:center;font-size:.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:.8rem;font-weight:500;text-align:center;color:#000;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,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UAEA,+EACE,8BACA,mCACA,kCACA,aACA,gBACA,qBAEF,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MC9BI,KD+BJ,iBC7BQ,QD8BR,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCEzCJ,gCACE,WACA,YACA,aACA,mBACA,uBACA,6BACA,yBAPF,gCAQI,6BACF,8CACE,kBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,sDACE,sBACA,uBACA,kBACA,YACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,mBD1BR,iBACA,yBACA,eACA,uBC2BI,uHACE,kBACA,UACA,OACA,MACA,WACA,YACA,iBAEN,sCACE,kBACA,UACA,SACA,WACA,eACA,yBACA,2BACA,aACA,mBACA,2BACA,gBACA,yBAZF,sCAaI,0BACF,uDACE,WACA,YACA,kBACA,cACA,iBD9DM,QC+DN,eACA,iBACA,mBACA,aDlEM,QCmEN,gBACA,aACA,mBACA,uBACA,UACA,2BACA,kBDrEJ,iBACA,yBACA,eACA,uBCoEI,yBAlBF,uDAmBI,WACA,YACA,cACF,+DACE,WACA,kBACA,OACA,MACA,WACA,YACA,6CACF,4HAEE,aDxFI,QCyFN,8DACE,WACA,YACA,iBACA,uBACA,cACF,6DACE,WACA,YACA,mBACA,uBACA,cACA,kBACA,UACA,WACA,yBATF,6DAUI,WACA,YACA,SACA,YCjHR,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,gCACA,kDACE,aACA,sBACA,uBACA,2BACA,iBFdE,KEeF,uCACA,kBACA,gBACA,YACF,+CACE,WACA,aACA,gCACA,wBACA,kBACA,gBACF,+CACE,WACA,aACA,kBACA,gBACA,iDACE,cACJ,iDACE,WACA,wDACE,WACA,iBFlCI,QEmCJ,gBACA,gBACA,kBACA,WACA,eACA,YACA","file":"index.css"}

package/build/index.js

@@ -1,11 +1,49 @@
 "use strict";
 
+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 _reactDom = _interopRequireDefault(require("react-dom"));
+var _Widget = _interopRequireDefault(require("./components/Widget"));
+
+var _ImageTab = require("./components/ImageTab");
+
+var _Instructions = require("./components/Instructions");
 
-var _Widget = _interopRequireDefault(require("./Widget"));
+var _RotationTab = require("./components/RotationTab");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _TabWrapper = require("./components/TabWrapper");
 
-_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_Widget.default, null), document.getElementById('root'));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -2,28 +2,31 @@
   "name": "hart-estate-widget",
   "description": "HART Estate widget",
   "author": "HART",
-  "keywords": ["react", "hart", "widget", "estate"],
-  "version": "0.0.4",
+  "keywords": [],
+  "version": "0.0.8",
   "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 --copy-files",
+    "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 --style compressed"
   },
   "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"
+    "core-js": "^3.21.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.0",
@@ -33,7 +36,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": {

package/build/Widget.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.object.assign.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _mobxReactLite = require("mobx-react-lite");
-
-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 }; }
-
-const Widget = (0, _mobxReactLite.observer)(options => {
-  const config = Object.assign(_defaultConfig.default, options);
-
-  _store.default.setConfig(config);
-
-  return /*#__PURE__*/_react.default.createElement(_Application.default, {
-    width: config.width,
-    height: config.height
-  });
-});
-var _default = Widget;
-exports.default = _default;