qwc2 2025.10.9 → 2025.10.14

package/plugins/ThemeSwitcher.js

@@ -1,10 +1,170 @@
-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)}/**
+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); }
+/**
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import PropTypes from"prop-types";import Icon from"../components/Icon";import{AppInfosPortalContext}from"../components/PluginsContainer";import SideBar from"../components/SideBar";import ThemeLayersListWindow from"../components/ThemeLayersListWindow";import ThemeList from"../components/ThemeList";import InputContainer from"../components/widgets/InputContainer";import ConfigUtils from"../utils/ConfigUtils";import LocaleUtils from"../utils/LocaleUtils";import"./style/ThemeSwitcher.css";/**
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Icon from '../components/Icon';
+import { AppInfosPortalContext } from '../components/PluginsContainer';
+import SideBar from '../components/SideBar';
+import ThemeLayersListWindow from '../components/ThemeLayersListWindow';
+import ThemeList from '../components/ThemeList';
+import InputContainer from '../components/widgets/InputContainer';
+import ConfigUtils from '../utils/ConfigUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import './style/ThemeSwitcher.css';
+
+/**
  * Theme switcher panel.
- */var ThemeSwitcher=/*#__PURE__*/function(_React$Component){function ThemeSwitcher(){var _this;_classCallCheck(this,ThemeSwitcher);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,ThemeSwitcher,[].concat(args));_defineProperty(_this,"state",{filter:""});_defineProperty(_this,"focusFilterField",function(el){if(el){// Need to wait until slide in transition is over
-setTimeout(function(){if(_this.props.currentTask&&_this.props.currentTask.id==="ThemeSwitcher"){el.focus()}},500)}});return _this}_inherits(ThemeSwitcher,_React$Component);return _createClass(ThemeSwitcher,[{key:"render",value:function render(){var _this2=this;var allowAddingOtherThemes=ConfigUtils.getConfigProp("allowAddingOtherThemes",this.props.activeTheme)===true;var showAddThemeButton=allowAddingOtherThemes&&!this.props.hideAddThemeButton;var showAddThemeLayersButton=allowAddingOtherThemes&&!this.props.hideAddThemeLayersButton;var themeFilter=this.props.showThemeFilter?/*#__PURE__*/React.createElement(InputContainer,{className:"theme-switcher-filter"},/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return _this2.setState({filter:ev.target.value})},placeholder:LocaleUtils.tr("themeswitcher.filter"),ref:this.focusFilterField,role:"input",type:"text",value:this.state.filter}),/*#__PURE__*/React.createElement(Icon,{icon:"remove",onClick:function onClick(){return _this2.setState({filter:""})},role:"suffix"})):null;var extraTitlebarContent=themeFilter;return/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(SideBar,{extraTitlebarContent:extraTitlebarContent,icon:"themes",id:"ThemeSwitcher",minWidth:"16em",side:this.props.side,title:LocaleUtils.tr("appmenu.items.ThemeSwitcher"),width:this.props.width},function(){return{body:/*#__PURE__*/React.createElement(ThemeList,{activeTheme:_this2.props.activeTheme,allowAddingOtherThemeLayers:showAddThemeLayersButton,allowAddingOtherThemes:showAddThemeButton,collapsibleGroups:_this2.props.collapsibleGroups,filter:_this2.state.filter,showDefaultThemeSelector:_this2.props.showDefaultThemeSelector,showLayerAfterChangeTheme:_this2.props.showLayerAfterChangeTheme})}}),showAddThemeLayersButton?/*#__PURE__*/React.createElement(ThemeLayersListWindow,{windowSize:this.props.themeLayersListWindowSize}):null,this.props.showActiveTheme&&this.props.activeTheme?(/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"app-info active-theme"},/*#__PURE__*/React.createElement(Icon,{icon:"themes"}),/*#__PURE__*/React.createElement("span",null,this.props.activeTheme.title||this.props.activeTheme.name||this.props.activeTheme.id)),this.context)):null)}}])}(React.Component);_defineProperty(ThemeSwitcher,"contextType",AppInfosPortalContext);_defineProperty(ThemeSwitcher,"availableIn3D",true);_defineProperty(ThemeSwitcher,"propTypes",{activeTheme:PropTypes.object,/** Whether to allow collapsing theme groups. */collapsibleGroups:PropTypes.bool,currentTask:PropTypes.object,/** Whether to hide the add theme button. Note: the button will also be hidden if the global option `allowAddingOtherThemes` is `false`. */hideAddThemeButton:PropTypes.bool,/** Whether to hide the add theme layers button. Note: the button will also be hidden if the global option `allowAddingOtherThemes` is `false`. */hideAddThemeLayersButton:PropTypes.bool,/** Whether to display the currently active theme below the application menu button. Default: false */showActiveTheme:PropTypes.bool,/** Whether to show an icon to select the default theme/bookmark (of a logged in user). */showDefaultThemeSelector:PropTypes.bool,/** Whether to show the LayerTree by default after switching the theme. */showLayerAfterChangeTheme:PropTypes.bool,/** Wether to show the theme filter field in the top bar. */showThemeFilter:PropTypes.bool,/** The side of the application on which to display the sidebar. */side:PropTypes.string,/** The default window size for the theme layers dialog. */themeLayersListWindowSize:PropTypes.shape({width:PropTypes.number,height:PropTypes.number}),/** Default width as a CSS string. */width:PropTypes.string});_defineProperty(ThemeSwitcher,"defaultProps",{width:"50%",showActiveTheme:false,showThemeFilter:true,showDefaultThemeSelector:true,showLayerAfterChangeTheme:false,themeLayersListWindowSize:{width:400,height:300},side:"right"});var selector=function selector(state){return{activeTheme:state.theme.current}};export default connect(selector,{})(ThemeSwitcher);
+ */
+var ThemeSwitcher = /*#__PURE__*/function (_React$Component) {
+  function ThemeSwitcher() {
+    var _this;
+    _classCallCheck(this, ThemeSwitcher);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ThemeSwitcher, [].concat(args));
+    _defineProperty(_this, "state", {
+      filter: ""
+    });
+    _defineProperty(_this, "focusFilterField", function (el) {
+      if (el) {
+        // Need to wait until slide in transition is over
+        setTimeout(function () {
+          if (_this.props.currentTask && _this.props.currentTask.id === "ThemeSwitcher") {
+            el.focus();
+          }
+        }, 500);
+      }
+    });
+    return _this;
+  }
+  _inherits(ThemeSwitcher, _React$Component);
+  return _createClass(ThemeSwitcher, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var allowAddingOtherThemes = ConfigUtils.getConfigProp("allowAddingOtherThemes", this.props.activeTheme) === true;
+      var showAddThemeButton = allowAddingOtherThemes && !this.props.hideAddThemeButton;
+      var showAddThemeLayersButton = allowAddingOtherThemes && !this.props.hideAddThemeLayersButton;
+      var themeFilter = this.props.showThemeFilter ? /*#__PURE__*/React.createElement(InputContainer, {
+        className: "theme-switcher-filter"
+      }, /*#__PURE__*/React.createElement("input", {
+        onChange: function onChange(ev) {
+          return _this2.setState({
+            filter: ev.target.value
+          });
+        },
+        placeholder: LocaleUtils.tr("themeswitcher.filter"),
+        ref: this.focusFilterField,
+        role: "input",
+        type: "text",
+        value: this.state.filter
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "remove",
+        onClick: function onClick() {
+          return _this2.setState({
+            filter: ""
+          });
+        },
+        role: "suffix"
+      })) : null;
+      var extraTitlebarContent = themeFilter;
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SideBar, {
+        extraTitlebarContent: extraTitlebarContent,
+        icon: "themes",
+        id: "ThemeSwitcher",
+        minWidth: "16em",
+        side: this.props.side,
+        title: LocaleUtils.tr("appmenu.items.ThemeSwitcher"),
+        width: this.props.width
+      }, function () {
+        return {
+          body: /*#__PURE__*/React.createElement(ThemeList, {
+            activeTheme: _this2.props.activeTheme,
+            allowAddingOtherThemeLayers: showAddThemeLayersButton,
+            allowAddingOtherThemes: showAddThemeButton,
+            collapsibleGroups: _this2.props.collapsibleGroups,
+            filter: _this2.state.filter,
+            showDefaultThemeSelector: _this2.props.showDefaultThemeSelector,
+            showLayerAfterChangeTheme: _this2.props.showLayerAfterChangeTheme
+          })
+        };
+      }), showAddThemeLayersButton ? /*#__PURE__*/React.createElement(ThemeLayersListWindow, {
+        windowSize: this.props.themeLayersListWindowSize
+      }) : null, this.props.showActiveTheme && this.props.activeTheme ? (/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "app-info active-theme"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "themes"
+      }), /*#__PURE__*/React.createElement("span", null, this.props.activeTheme.title || this.props.activeTheme.name || this.props.activeTheme.id)), this.context)) : null);
+    }
+  }]);
+}(React.Component);
+_defineProperty(ThemeSwitcher, "contextType", AppInfosPortalContext);
+_defineProperty(ThemeSwitcher, "availableIn3D", true);
+_defineProperty(ThemeSwitcher, "propTypes", {
+  activeTheme: PropTypes.object,
+  /** Whether to allow collapsing theme groups. */
+  collapsibleGroups: PropTypes.bool,
+  currentTask: PropTypes.object,
+  /** Whether to hide the add theme button. Note: the button will also be hidden if the global option `allowAddingOtherThemes` is `false`. */
+  hideAddThemeButton: PropTypes.bool,
+  /** Whether to hide the add theme layers button. Note: the button will also be hidden if the global option `allowAddingOtherThemes` is `false`. */
+  hideAddThemeLayersButton: PropTypes.bool,
+  /** Whether to display the currently active theme below the application menu button. Default: false */
+  showActiveTheme: PropTypes.bool,
+  /** Whether to show an icon to select the default theme/bookmark (of a logged in user). */
+  showDefaultThemeSelector: PropTypes.bool,
+  /** Whether to show the LayerTree by default after switching the theme. */
+  showLayerAfterChangeTheme: PropTypes.bool,
+  /** Wether to show the theme filter field in the top bar. */
+  showThemeFilter: PropTypes.bool,
+  /** The side of the application on which to display the sidebar. */
+  side: PropTypes.string,
+  /** The default window size for the theme layers dialog. */
+  themeLayersListWindowSize: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number
+  }),
+  /** Default width as a CSS string. */
+  width: PropTypes.string
+});
+_defineProperty(ThemeSwitcher, "defaultProps", {
+  width: "50%",
+  showActiveTheme: false,
+  showThemeFilter: true,
+  showDefaultThemeSelector: true,
+  showLayerAfterChangeTheme: false,
+  themeLayersListWindowSize: {
+    width: 400,
+    height: 300
+  },
+  side: 'right'
+});
+var selector = function selector(state) {
+  return {
+    activeTheme: state.theme.current
+  };
+};
+export default connect(selector, {})(ThemeSwitcher);