Add url property to MatomoUrl to hold entire URL string so the whole URL can easily be watched (#19348)

3 files changed, 21 insertions, 35 deletions

diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js
index f2cbbb42dc..9b44476dfb 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js
@@ -1129,9 +1129,15 @@ var MatomoUrl_MatomoUrl = /*#__PURE__*/function () {
 
     MatomoUrl_classCallCheck(this, MatomoUrl);
 
-    MatomoUrl_defineProperty(this, "urlQuery", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(''));
+    MatomoUrl_defineProperty(this, "url", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(null));
 
-    MatomoUrl_defineProperty(this, "hashQuery", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(''));
+    MatomoUrl_defineProperty(this, "urlQuery", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return _this.url.value ? _this.url.value.search.replace(/^\?/, '') : '';
+    }));
+
+    MatomoUrl_defineProperty(this, "hashQuery", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return _this.url.value ? _this.url.value.hash.replace(/^[#/?]+/, '') : '';
+    }));
 
     MatomoUrl_defineProperty(this, "urlParsed", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
       return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["readonly"])(_this.parse(_this.urlQuery.value));
@@ -1145,17 +1151,12 @@ var MatomoUrl_MatomoUrl = /*#__PURE__*/function () {
       return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["readonly"])(Object.assign(Object.assign({}, _this.urlParsed.value), _this.hashParsed.value));
     }));
 
-    this.setUrlQuery(window.location.search);
-    this.setHashQuery(window.location.hash); // $locationChangeSuccess is triggered before angularjs changes actual window the hash, so we
+    this.url.value = new URL(window.location.href); // $locationChangeSuccess is triggered before angularjs changes actual window the hash, so we
     // have to hook into this method if we want our event handlers to execute before other angularjs
     // handlers (like the reporting page one)
 
     Matomo_Matomo.on('$locationChangeSuccess', function (absUrl) {
-      var url = new URL(absUrl);
-
-      _this.setUrlQuery(url.search.replace(/^\?/, ''));
-
-      _this.setHashQuery(url.hash.replace(/^#/, ''));
+      _this.url.value = new URL(absUrl);
     });
     this.updatePeriodParamsFromUrl();
   }
@@ -1282,16 +1283,6 @@ var MatomoUrl_MatomoUrl = /*#__PURE__*/function () {
 
       MatomoUrl_piwik.currentDateString = date;
     }
-  }, {
-    key: "setUrlQuery",
-    value: function setUrlQuery(search) {
-      this.urlQuery.value = search.replace(/^\?/, '');
-    }
-  }, {
-    key: "setHashQuery",
-    value: function setHashQuery(hash) {
-      this.hashQuery.value = hash.replace(/^[#/?]+/, '');
-    }
   }]);
 
   return MatomoUrl;
diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
index 2e62fd9275..60d3e53295 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
@@ -79,7 +79,7 @@ function ue(e,t){return he(e)||fe(e,t)||pe(e,t)||de()}function de(){throw new Ty
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */p.addCustomPeriod("year",se);var we=window,Oe=we.piwik,je=we.broadcast;function ke(e,t){try{return p.parse(e,t),!0}catch(n){return!1}}var Se=function(){function e(){var t=this;ge(this,e),ye(this,"urlQuery",Object(a["ref"])("")),ye(this,"hashQuery",Object(a["ref"])("")),ye(this,"urlParsed",Object(a["computed"])((function(){return Object(a["readonly"])(t.parse(t.urlQuery.value))}))),ye(this,"hashParsed",Object(a["computed"])((function(){return Object(a["readonly"])(t.parse(t.hashQuery.value))}))),ye(this,"parsed",Object(a["computed"])((function(){return Object(a["readonly"])(Object.assign(Object.assign({},t.urlParsed.value),t.hashParsed.value))}))),this.setUrlQuery(window.location.search),this.setHashQuery(window.location.hash),S.on("$locationChangeSuccess",(function(e){var n=new URL(e);t.setUrlQuery(n.search.replace(/^\?/,"")),t.setHashQuery(n.hash.replace(/^#/,""))})),this.updatePeriodParamsFromUrl()}return be(e,[{key:"updateHashToUrl",value:function(e){var t=S.helper.getAngularDependency("$location");t.url(e)}},{key:"updateHash",value:function(e){var t=this.getFinalHashParams(e),n=this.stringify(t),r=S.helper.getAngularDependency("$location");r.search(n);var i=S.helper.getAngularDependency("$timeout");i()}},{key:"updateUrl",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n="string"!==typeof e?this.stringify(e):e,r=Object.keys(t).length?this.getFinalHashParams(t,e):{},i=this.stringify(r),a="?".concat(n);i.length&&(a="".concat(a,"#?").concat(i)),window.broadcast.propagateNewPage("",void 0,void 0,void 0,a)}},{key:"getFinalHashParams",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n="string"!==typeof e?e:this.parse(e),r="string"!==typeof e?t:this.parse(t);return Object.assign({period:r.period||this.parsed.value.period,date:r.date||this.parsed.value.date,segment:r.segment||this.parsed.value.segment},n)}},{key:"updateLocation",value:function(e){S.helper.isAngularRenderingThePage()?this.updateHash(e):this.updateUrl(e)}},{key:"getSearchParam",value:function(e){var t=window.location.href.split("#"),n=new RegExp("".concat(e,"(\\[]|=)"));if(t&&t[1]&&n.test(decodeURIComponent(t[1]))){var r=window.broadcast.getValueFromHash(e,window.location.href);if(r||"date"!==e&&"period"!==e&&"idSite"!==e)return r}return window.broadcast.getValueFromUrl(e,window.location.search)}},{key:"parse",value:function(e){return je.getValuesFromUrl("?".concat(e),!0)}},{key:"stringify",value:function(e){var t=Object.fromEntries(Object.entries(e).filter((function(e){var t=ue(e,2),n=t[1];return""!==n&&null!==n&&void 0!==n})));return $.param(t).replace(/%5B%5D/g,"[]").replace(/%2C/g,",").replace(/\+/g,"%20")}},{key:"updatePeriodParamsFromUrl",value:function(){var e=this.getSearchParam("date"),t=this.getSearchParam("period");if(ke(t,e)&&(Oe.period!==t||Oe.currentDateString!==e)){Oe.period=t;var n=p.parse(t,e).getDateRange();Oe.startDateString=D(n[0]),Oe.endDateString=D(n[1]),Oe.updateDateInTitle(e,t),"range"===Oe.period&&(e="".concat(Oe.startDateString,",").concat(Oe.endDateString)),Oe.currentDateString=e}}},{key:"setUrlQuery",value:function(e){this.urlQuery.value=e.replace(/^\?/,"")}},{key:"setHashQuery",value:function(e){this.hashQuery.value=e.replace(/^[#/?]+/,"")}}]),e}(),Ce=new Se,Ee=Ce;
+ */p.addCustomPeriod("year",se);var we=window,Oe=we.piwik,je=we.broadcast;function ke(e,t){try{return p.parse(e,t),!0}catch(n){return!1}}var Se=function(){function e(){var t=this;ge(this,e),ye(this,"url",Object(a["ref"])(null)),ye(this,"urlQuery",Object(a["computed"])((function(){return t.url.value?t.url.value.search.replace(/^\?/,""):""}))),ye(this,"hashQuery",Object(a["computed"])((function(){return t.url.value?t.url.value.hash.replace(/^[#/?]+/,""):""}))),ye(this,"urlParsed",Object(a["computed"])((function(){return Object(a["readonly"])(t.parse(t.urlQuery.value))}))),ye(this,"hashParsed",Object(a["computed"])((function(){return Object(a["readonly"])(t.parse(t.hashQuery.value))}))),ye(this,"parsed",Object(a["computed"])((function(){return Object(a["readonly"])(Object.assign(Object.assign({},t.urlParsed.value),t.hashParsed.value))}))),this.url.value=new URL(window.location.href),S.on("$locationChangeSuccess",(function(e){t.url.value=new URL(e)})),this.updatePeriodParamsFromUrl()}return be(e,[{key:"updateHashToUrl",value:function(e){var t=S.helper.getAngularDependency("$location");t.url(e)}},{key:"updateHash",value:function(e){var t=this.getFinalHashParams(e),n=this.stringify(t),r=S.helper.getAngularDependency("$location");r.search(n);var i=S.helper.getAngularDependency("$timeout");i()}},{key:"updateUrl",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n="string"!==typeof e?this.stringify(e):e,r=Object.keys(t).length?this.getFinalHashParams(t,e):{},i=this.stringify(r),a="?".concat(n);i.length&&(a="".concat(a,"#?").concat(i)),window.broadcast.propagateNewPage("",void 0,void 0,void 0,a)}},{key:"getFinalHashParams",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n="string"!==typeof e?e:this.parse(e),r="string"!==typeof e?t:this.parse(t);return Object.assign({period:r.period||this.parsed.value.period,date:r.date||this.parsed.value.date,segment:r.segment||this.parsed.value.segment},n)}},{key:"updateLocation",value:function(e){S.helper.isAngularRenderingThePage()?this.updateHash(e):this.updateUrl(e)}},{key:"getSearchParam",value:function(e){var t=window.location.href.split("#"),n=new RegExp("".concat(e,"(\\[]|=)"));if(t&&t[1]&&n.test(decodeURIComponent(t[1]))){var r=window.broadcast.getValueFromHash(e,window.location.href);if(r||"date"!==e&&"period"!==e&&"idSite"!==e)return r}return window.broadcast.getValueFromUrl(e,window.location.search)}},{key:"parse",value:function(e){return je.getValuesFromUrl("?".concat(e),!0)}},{key:"stringify",value:function(e){var t=Object.fromEntries(Object.entries(e).filter((function(e){var t=ue(e,2),n=t[1];return""!==n&&null!==n&&void 0!==n})));return $.param(t).replace(/%5B%5D/g,"[]").replace(/%2C/g,",").replace(/\+/g,"%20")}},{key:"updatePeriodParamsFromUrl",value:function(){var e=this.getSearchParam("date"),t=this.getSearchParam("period");if(ke(t,e)&&(Oe.period!==t||Oe.currentDateString!==e)){Oe.period=t;var n=p.parse(t,e).getDateRange();Oe.startDateString=D(n[0]),Oe.endDateString=D(n[1]),Oe.updateDateInTitle(e,t),"range"===Oe.period&&(e="".concat(Oe.startDateString,",").concat(Oe.endDateString)),Oe.currentDateString=e}}}]),e}(),Ce=new Se,Ee=Ce;
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/CoreHome/vue/src/MatomoUrl/MatomoUrl.ts b/plugins/CoreHome/vue/src/MatomoUrl/MatomoUrl.ts
index 4d881450ff..6779639031 100644
--- a/plugins/CoreHome/vue/src/MatomoUrl/MatomoUrl.ts
+++ b/plugins/CoreHome/vue/src/MatomoUrl/MatomoUrl.ts
@@ -28,9 +28,15 @@ type ParsedQueryParameters = Record<string, unknown>;
  * URL store and helper functions.
  */
 class MatomoUrl {
-  readonly urlQuery = ref('');
+  readonly url = ref<URL|null>(null);
 
-  readonly hashQuery = ref('');
+  readonly urlQuery = computed(
+    () => (this.url.value ? this.url.value.search.replace(/^\?/, '') : ''),
+  );
+
+  readonly hashQuery = computed(
+    () => (this.url.value ? this.url.value.hash.replace(/^[#/?]+/, '') : ''),
+  );
 
   readonly urlParsed = computed(() => readonly(
     this.parse(this.urlQuery.value) as ParsedQueryParameters,
@@ -46,16 +52,13 @@ class MatomoUrl {
   } as ParsedQueryParameters));
 
   constructor() {
-    this.setUrlQuery(window.location.search);
-    this.setHashQuery(window.location.hash);
+    this.url.value = new URL(window.location.href);
 
     // $locationChangeSuccess is triggered before angularjs changes actual window the hash, so we
     // have to hook into this method if we want our event handlers to execute before other angularjs
     // handlers (like the reporting page one)
     Matomo.on('$locationChangeSuccess', (absUrl: string) => {
-      const url = new URL(absUrl);
-      this.setUrlQuery(url.search.replace(/^\?/, ''));
-      this.setHashQuery(url.hash.replace(/^#/, ''));
+      this.url.value = new URL(absUrl);
     });
 
     this.updatePeriodParamsFromUrl();
@@ -193,14 +196,6 @@ class MatomoUrl {
 
     piwik.currentDateString = date;
   }
-
-  private setUrlQuery(search: string) {
-    this.urlQuery.value = search.replace(/^\?/, '');
-  }
-
-  private setHashQuery(hash: string) {
-    this.hashQuery.value = hash.replace(/^[#/?]+/, '');
-  }
 }
 
 const instance = new MatomoUrl();