qwc2/plugins/TourGuide.js

QGIS Web Client

function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{setCurrentTask}from"../actions/task";import LocaleUtils from"../utils/LocaleUtils";import MiscUtils from"../utils/MiscUtils";var TourGuide=/*#__PURE__*/function(_React$Component){function TourGuide(){var _this;_classCallCheck(this,TourGuide);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,TourGuide,[].concat(args));_defineProperty(_this,"state",{tourSteps:[],driverObj:null,currentStepIndex:0,rawStepData:[]});_defineProperty(_this,"handleClick",function(driverObj,direction){var _this$state=_this.state,currentStepIndex=_this$state.currentStepIndex,rawStepData=_this$state.rawStepData;var currentRawStep=rawStepData[currentStepIndex];var actionNames=direction==="next"?currentRawStep===null||currentRawStep===void 0?void 0:currentRawStep.onNextClick:currentRawStep===null||currentRawStep===void 0?void 0:currentRawStep.onPrevClick;if(Array.isArray(actionNames)){actionNames.forEach(function(actionName){return _this.runCustomAction(actionName)})}else if(actionNames){_this.runCustomAction(actionNames)}_this.setState(function(prevState){return{currentStepIndex:direction==="next"?prevState.currentStepIndex+1:Math.max(prevState.currentStepIndex-1,0)}},function(){direction==="next"?driverObj.moveNext():driverObj.movePrevious()})});_defineProperty(_this,"runCustomAction",function(actionName){var _document$querySelect,_document$querySelect2;if(actionName.startsWith("setTask:")){_this.props.setCurrentTask(actionName.replace("setTask:","").trim());return}if(actionName.startsWith("openSubMenu:")){var submenuName=actionName.replace("openSubMenu:","").trim();var submenu=Array.from(document.querySelectorAll(".appmenu-submenu")).find(function(el){return el.querySelector("span.icon-".concat(submenuName))});if(submenu){submenu.classList.add("appmenu-submenu-expanded")}else{/* eslint-disable-next-line */console.warn("Submenu with icon-".concat(submenuName," not found."))}return}if(actionName.startsWith("closeSubMenu:")){var _submenuName=actionName.replace("closeSubMenu:","").trim();var _submenu=Array.from(document.querySelectorAll(".appmenu-submenu")).find(function(el){return el.querySelector("span.icon-".concat(_submenuName))});if(_submenu){_submenu.classList.remove("appmenu-submenu-expanded")}else{/* eslint-disable-next-line */console.warn("Submenu with icon-".concat(_submenuName," not found."))}return}switch(actionName){case"openMenu":(_document$querySelect=document.querySelector(".AppMenu"))===null||_document$querySelect===void 0||_document$querySelect.classList.add("appmenu-visible");break;case"closeMenu":(_document$querySelect2=document.querySelector(".AppMenu"))===null||_document$querySelect2===void 0||_document$querySelect2.classList.remove("appmenu-visible");break;default:/* eslint-disable-next-line */console.warn("Unknown action:",actionName)}});_defineProperty(_this,"startTour",function(){var _this$state$driverObj;(_this$state$driverObj=_this.state.driverObj)===null||_this$state$driverObj===void 0||_this$state$driverObj.drive()});return _this}_inherits(TourGuide,_React$Component);return _createClass(TourGuide,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;if(!this.props.tourGuideUrl){return}fetch(MiscUtils.resolveAssetsPath(this.props.tourGuideUrl)).then(function(response){return response.json()}).then(function(data){var steps=data.map(function(step){return{element:step.selector,popover:{title:step.title,description:step.content,side:step.side,align:step.align},disableActiveInteraction:step.disableActiveInteraction}});_this2.setState({tourSteps:steps,rawStepData:data})})["catch"](function(err){/* eslint-disable-next-line */console.error("Failed to fetch tour guide data:",err)})}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this3=this;if(this.props.active&&!prevProps.active&&this.state.tourSteps){var tourSteps=this.state.tourSteps;import("driver.js/dist/driver.css");import("./style/TourGuide.css");import("driver.js").then(function(module){var driver=module.driver;var driverObj=driver({popoverClass:"driverjs-theme",nextBtnText:LocaleUtils.tr("tourguide.next")+" \u2192",prevBtnText:"\u2190 "+LocaleUtils.tr("tourguide.previous"),doneBtnText:LocaleUtils.tr("tourguide.done"),progressText:"{{current}} / {{total}}",showProgress:true,steps:tourSteps,onNextClick:function onNextClick(){return _this3.handleClick(driverObj,"next")},onPrevClick:function onPrevClick(){return _this3.handleClick(driverObj,"prev")},onDestroyed:function onDestroyed(){var _document$querySelect3;document.querySelectorAll(".AppMenu .appmenu-submenu").forEach(function(submenu){return submenu.classList.remove("appmenu-submenu-expanded")});(_document$querySelect3=document.querySelector(".AppMenu"))===null||_document$querySelect3===void 0||_document$querySelect3.classList.remove("appmenu-visible");_this3.props.setCurrentTask(null)},onHighlightStarted:function onHighlightStarted(_,step){var index=tourSteps.findIndex(function(s){return s.element===step.element});_this3.setState({currentStepIndex:index})}});_this3.setState({driverObj:driverObj},function(){_this3.startTour();_this3.props.setCurrentTask(null)})})["catch"](function(err){/* eslint-disable-next-line */console.error("Failed to load Driver.js:",err)})}}},{key:"render",value:function render(){return null}}])}(React.Component);_defineProperty(TourGuide,"propTypes",{active:PropTypes.bool,setCurrentTask:PropTypes.func,/** Url of the Tourguide JSON configuration. */tourGuideUrl:PropTypes.string});_defineProperty(TourGuide,"defaultProps",{tourGuideUrl:":/tourguide.json"});export default connect(function(state){return{active:state.task.id==="TourGuide"}},{setCurrentTask:setCurrentTask})(TourGuide);