Pageviews: changing URL structure to use query string instead of hash

javascripts/pageviews.js

@@ -264,11 +264,11 @@ class PageViews extends Pv {
   }
 
   /**
-   * Generate key/value pairs of URL hash params
-   * @returns {Object} key/value pairs representation of URL hash
+   * Generate key/value pairs of URL query string
+   * @returns {Object} key/value pairs representation of query string
    */
-  parseHashParams() {
-    const uri = location.hash.slice(1),
+  parseQueryString() {
+    const uri = decodeURI(location.search.slice(1)),
       chunks = uri.split('&');
     let params = {};
 
@@ -286,12 +286,12 @@ class PageViews extends Pv {
   }
 
   /**
-   * Parses the URL hash and sets all the inputs accordingly
+   * Parses the URL query string and sets all the inputs accordingly
    * Should only be called on initial page load, until we decide to support pop states (probably never)
    * @returns {null} nothing
    */
   popParams() {
-    let startDate, endDate, params = this.parseHashParams();
+    let startDate, endDate, params = this.parseQueryString();
 
     $(config.projectInput).val(params.project || config.defaults.project);
     if (this.validateProject()) return;
@@ -424,7 +424,7 @@ class PageViews extends Pv {
   }
 
   /**
-   * Replaces history state with new URL hash representing current user input
+   * Replaces history state with new URL query string representing current user input
    * Called whenever we go to update the chart
    * @returns {null} nothing
    */
@@ -434,11 +434,11 @@ class PageViews extends Pv {
 
     if (window.history && window.history.replaceState) {
       window.history.replaceState({}, document.title,
-        `#${$.param(this.getParams())}&pages=${escapedPages}`
+        `?${$.param(this.getParams())}&pages=${escapedPages}`
       );
     }
 
-    $('.permalink').prop('href', `#${$.param(this.getPermaLink())}&pages=${escapedPages}`);
+    $('.permalink').prop('href', `?${$.param(this.getPermaLink())}&pages=${escapedPages}`);
   }
 
   /**
@@ -595,7 +595,7 @@ class PageViews extends Pv {
     this.pushParams();
 
     /** prevent duplicate querying due to conflicting listeners */
-    if (!force && location.hash === this.params && this.prevChartType === this.chartType) {
+    if (!force && location.search === this.params && this.prevChartType === this.chartType) {
       return;
     }
 
@@ -604,7 +604,7 @@ class PageViews extends Pv {
       return;
     }
 
-    this.params = location.hash;
+    this.params = location.search;
     this.prevChartType = this.chartType;
     this.clearMessages(); // clear out old error messages
 
@@ -754,11 +754,11 @@ class PageViews extends Pv {
 }
 
 $(document).ready(() => {
-  /** assume query params are supposed to be hash params */
-  if (document.location.search && !document.location.hash) {
-    return document.location.href = document.location.href.replace('?', '#');
-  } else if (document.location.search) {
-    return document.location.href = document.location.href.replace(/\?.*/, '');
+  /** assume hash params are supposed to be query params */
+  if (document.location.hash && !document.location.search) {
+    return document.location.href = document.location.href.replace('#', '?');
+  } else if (document.location.hash) {
+    return document.location.href = document.location.href.replace(/\#.*/, '');
   }
 
   $.extend(Chart.defaults.global, {animation: false, responsive: true});

messages/de.json

@@ -154,7 +154,6 @@
 	"url-structure-example": "Um die aktuellsten Daten zu einem angegebenen Artikel auf deinem Wiki mit Standardoptionen abzurufen, verwende:\n$1\nErsetze $2 durch ein gültiges $3. $4 wird durch die Seite aufgelöst, auf der der Link platziert ist.",
 	"url-structure-example-siteviews": "Um die aktuellsten Daten zu einem angegebenen Artikel auf deinem Wiki mit Standardoptionen zu erhalten, verwende:\n$1",
 	"url-structure-topviews-example": "Um die Standardliste der meistbesuchten Seiten auf deinem Wiki anzuzeigen, verwende:\n$1\nErsetze $2 durch ein gültiges $3. Du kannst auch $4 verwenden, um bestimmte Seiten wie die Hauptseite von der Ansicht auszuschließen.",
-	"url-structure-hash-param": "Pageviews Analysis verwendet den JavaScript-<a href=\"https://de.wikipedia.org/wiki/Fragmentbezeichner\">Fragmentbezeichner</a>, um die URL-Parameter zu erstellen. Das bedeutet, dass anstatt <code>?</code> alle Parameter einem Rautensymbol <code>#</code> folgen.",
 	"url-structure-parameters": "Parameter",
 	"url-structure-parameters-order": "Kann in beliebiger Reihenfolge verwendet werden",
 	"url-structure-project": "$1 oder andere gültige $2",

messages/en.json

@@ -154,7 +154,6 @@
 	"url-structure-example": "To get the latest data on a given article on your wiki, with default options, use:\n$1\nreplacing $2 with a valid $3. $4 will resolve to the page the link is placed on",
 	"url-structure-example-siteviews": "To get the latest data on a given article on your wiki, with default options, use:\n$1",
 	"url-structure-topviews-example": "To show the default list of top viewed pages on your wiki, use:\n$1\nreplacing $2 with a valid $3. You can also use $4 to exclude certain pages from view, such as the Main Page.",
-	"url-structure-hash-param": "Pageviews Analysis uses the JavaScript <a href='https://en.wikipedia.org/wiki/Fragment_identifier'>fragment identifier</a> to construct the URL parameters. This means instead of <code>?</code> all parameters follow a hashmark <code>#</code>",
 	"url-structure-parameters": "Parameters",
 	"url-structure-parameters-order": "Can be used in any order",
 	"url-structure-project": "$1 or other valid $2",

messages/fr.json

@@ -159,7 +159,6 @@
 	"url-structure-example": "Pour obtenir les dernières données sur un article récent de votre wiki, avec les options par défaut, utiliser : $1\nen remplaçant $2 par un $3 valide. $4 résoudra vers la page le lien qui est placé dessus",
 	"url-structure-example-siteviews": "Pour obtenir les dernières données sur un article donné de votre wiki, avec les options par défaut, utiliser :\n$1",
 	"url-structure-topviews-example": "Pour afficher la valeur par défaut de la liste des pages les plus vues sur votre wiki, utilisez:\n$1\nen remplaçant $2 par un lien valide $3 . Vous pouvez également utiliser $4 pour empêcher certaines pages d'être vues, comme la page principale.",
-	"url-structure-hash-param": "L’Analyse Pageviews utilise <a href='https://en.wikipedia.org/wiki/Fragment_identifier'>l’identifiant de fragment</a> JavaScript pour construire les paramètres de l’URL. Cela veut dire qu’au lieu d’un <code>?</code>, tous les paramètres suivent un dièse <code>#</code>",
 	"url-structure-parameters": "Paramètres",
 	"url-structure-parameters-order": "Peut être utilisé dans n'importe quel ordre",
 	"url-structure-project": "$1 ou un autre page valide $2",

messages/ia.json

@@ -148,7 +148,6 @@
 	"url-structure-example": "Pro obtener le ultime datos sur un certe articulo in tu wiki, con optiones predefinite, usa:\n$1\nreimplaciante $2 per un $3 valide. $4 devenira le pagina sur le qual le ligamine es inserite",
 	"url-structure-example-siteviews": "Pro obtener le ultime datos sur un certe articulo in tu wiki, con optiones predefinite, usa:\n$1",
 	"url-structure-topviews-example": "Pro monstrar le lista predefinite del paginas le plus visitate in tu wiki, usa:\n$1\nreimplaciante $2 per un $3 valide. Tu pote etiam usar $4 pro excluder certe paginas, como p.ex. le pagina principal.",
-	"url-structure-hash-param": "Le analyse de visitas usa le technica JavaScript <a href='https://en.wikipedia.org/wiki/Fragment_identifier'>identificator de fragmentos</a> pro construer le parametros de URL. Isto significa que, in loco del <code>?</code>, tote le parametros seque un character de grillia <code>#</code>",
 	"url-structure-parameters": "Parametros",
 	"url-structure-parameters-order": "Pote esser usate in qualcunque ordine",
 	"url-structure-project": "$1 o altere $2 valide",

messages/qqq.json

@@ -161,7 +161,6 @@
 	"url-structure-example": "Example of how to link to Pageviews Analysis on a wiki. $1 is the example link, $2 is the example project, $3 is the link to the site matrix, $4 is {{FULLPAGENAMEE}}",
 	"url-structure-example-siteviews": "Example of how to link to Siteviews Analysis on a wiki. $1 is the example link. This message is the same as the first sentence of 'url-structure-example'",
 	"url-structure-topviews-example": "Example of how to link to Topviews Analysis on a wiki. $1 is the example link, $2 is the example project, $3 is the link to the site matrix, and $4 is the 'excludes' parameter",
-	"url-structure-hash-param": "Text explaining that Pageviews Analysis uses the hash identifier rather than a query string.",
 	"url-structure-parameters": "Heading for the list of parameters\n{{Identical|Parameter}}",
 	"url-structure-parameters-order": "Text explaining that parameters can be used in any order",
 	"url-structure-project": "Documentation for the 'project' parameter. $1 is the default (en.wikipedia.org), $2 is the link to the site matrix",

messages/ro.json

@@ -152,7 +152,6 @@
 	"url-structure-example": "Pentru a obține ultimele informații pentru un articol anume de pe wiki-ul dumneavoastră, cu opțiuni implicite, folosiți următoarea legătură (link):\n$1\nînlocuind $2 cu un $3 valid. $4 reprezintă numele paginii pe care este plasată legătura (linkul)",
 	"url-structure-example-siteviews": "Pentru a obține ultimele informații despre un anumit articol de pe wiki-ul dvs., cu opțiuni implicite, folosiți:\n$1",
 	"url-structure-topviews-example": "Pentru a afișa lista implicită pentru cele mai vizualizate pagini de pe wiki-ul dvs., folosiți:\n$1\nînlocuind $2 cu un $3 valid. Puteți folosi și $4 pentru a exclude afișarea anumitor pagini, cum ar fi Pagina principală.",
-	"url-structure-hash-param": "Analiza vizualizărilor paginii folosește <a href='https://ro.wikipedia.org/wiki/Identificator_de_fragment'>identificatorul de fragmente</a> al JavaScript pentru a construi parametrii URL. Aceasta înseamnă că în loc de <code>?</code> toți parametrii urmează după un semn diez <code>#</code>",
 	"url-structure-parameters": "Parametri",
 	"url-structure-parameters-order": "Pot fi folosiți în orice ordine",
 	"url-structure-project": "$1 sau alt $2 valid",

messages/zh-hans.json

@@ -153,7 +153,6 @@
 	"url-structure-example": "要获取您wiki上指定条目的最新数据，并使用默认选项，请使用：\n$1\n将$2替换为有效的$3。$4将决定链接放置的页面",
 	"url-structure-example-siteviews": "要获取您wiki上指定条目的最新数据，并使用默认选项，请使用：\n$1",
 	"url-structure-topviews-example": "要获取您wiki上默认最多浏览页面的列表，请使用：\n$1\n将$2替换为有效的$3。您也可以使用$4以从视图中排除特定页面，例如首页。",
-	"url-structure-hash-param": "页面浏览分析使用JavaScript<a href='https://en.wikipedia.org/wiki/Fragment_identifier'>碎片标识符</a>以将URL参数结构化。这意味着所有参数会跟随题标<code>#</code>而不是<code>?</code>",
 	"url-structure-parameters": "参数",
 	"url-structure-parameters-order": "可被用在任何顺序",
 	"url-structure-project": "$1或其他有效的$2",

messages/zh-hant.json

@@ -156,7 +156,6 @@
 	"url-structure-example": "想取得您所指定的維基百科條目最新數據內容；並使用預設選項，請使用：\n$1\n將$2替換成有效的$3。$4會呈現出頁面相關連結",
 	"url-structure-example-siteviews": "要以預設方式獲取您在維基上指定的條目最新數據資料，請使用$1",
 	"url-structure-topviews-example": "想顯示出維基上最多瀏覽頁面的預設清單內容，請使用：\n$1\n將$2替換成有效的$3。您也可使用$4把指定的頁面項目從畫面上排除，例如首頁。",
-	"url-structure-hash-param": "本頁面瀏覽分析工具是以 JavaScript 程式語言中的 <a href='https://en.wikipedia.org/wiki/Fragment_identifier'>片段標識符</a>來結構化網址所使用的參數。這代表參數是以符號 <code>#</code>為開頭；而非符號 <code>?</code>",
 	"url-structure-parameters": "參數",
 	"url-structure-parameters-order": "可用在任何排序",
 	"url-structure-project": "$1或其它有效的$2",

public_html/pageviews.js

@@ -470,14 +470,14 @@ var PageViews = function (_Pv) {
     }
 
     /**
-     * Generate key/value pairs of URL hash params
-     * @returns {Object} key/value pairs representation of URL hash
+     * Generate key/value pairs of URL query string
+     * @returns {Object} key/value pairs representation of query string
      */
 
   }, {
-    key: 'parseHashParams',
-    value: function parseHashParams() {
-      var uri = location.hash.slice(1),
+    key: 'parseQueryString',
+    value: function parseQueryString() {
+      var uri = decodeURI(location.search.slice(1)),
           chunks = uri.split('&');
       var params = {};
 
@@ -495,7 +495,7 @@ var PageViews = function (_Pv) {
     }
 
     /**
-     * Parses the URL hash and sets all the inputs accordingly
+     * Parses the URL query string and sets all the inputs accordingly
      * Should only be called on initial page load, until we decide to support pop states (probably never)
      * @returns {null} nothing
      */
@@ -507,7 +507,7 @@ var PageViews = function (_Pv) {
 
       var startDate = undefined,
           endDate = undefined,
-          params = this.parseHashParams();
+          params = this.parseQueryString();
 
       $(config.projectInput).val(params.project || config.defaults.project);
       if (this.validateProject()) return;
@@ -648,7 +648,7 @@ var PageViews = function (_Pv) {
     }
 
     /**
-     * Replaces history state with new URL hash representing current user input
+     * Replaces history state with new URL query string representing current user input
      * Called whenever we go to update the chart
      * @returns {null} nothing
      */
@@ -660,10 +660,10 @@ var PageViews = function (_Pv) {
           escapedPages = pages.join('|').replace(/[&%]/g, escape);
 
       if (window.history && window.history.replaceState) {
-        window.history.replaceState({}, document.title, '#' + $.param(this.getParams()) + '&pages=' + escapedPages);
+        window.history.replaceState({}, document.title, '?' + $.param(this.getParams()) + '&pages=' + escapedPages);
       }
 
-      $('.permalink').prop('href', '#' + $.param(this.getPermaLink()) + '&pages=' + escapedPages);
+      $('.permalink').prop('href', '?' + $.param(this.getPermaLink()) + '&pages=' + escapedPages);
     }
 
     /**
@@ -857,7 +857,7 @@ var PageViews = function (_Pv) {
       this.pushParams();
 
       /** prevent duplicate querying due to conflicting listeners */
-      if (!force && location.hash === this.params && this.prevChartType === this.chartType) {
+      if (!force && location.search === this.params && this.prevChartType === this.chartType) {
         return;
       }
 
@@ -866,7 +866,7 @@ var PageViews = function (_Pv) {
         return;
       }
 
-      this.params = location.hash;
+      this.params = location.search;
       this.prevChartType = this.chartType;
       this.clearMessages(); // clear out old error messages
 
@@ -1011,11 +1011,11 @@ var PageViews = function (_Pv) {
 }(Pv);
 
 $(document).ready(function () {
-  /** assume query params are supposed to be hash params */
-  if (document.location.search && !document.location.hash) {
-    return document.location.href = document.location.href.replace('?', '#');
-  } else if (document.location.search) {
-    return document.location.href = document.location.href.replace(/\?.*/, '');
+  /** assume hash params are supposed to be query params */
+  if (document.location.hash && !document.location.search) {
+    return document.location.href = document.location.href.replace('#', '?');
+  } else if (document.location.hash) {
+    return document.location.href = document.location.href.replace(/\#.*/, '');
   }
 
   $.extend(Chart.defaults.global, { animation: false, responsive: true });

public_html/url_structure/index.php

@@ -20,14 +20,11 @@
       </header>
       <main class="col-lg-10 col-lg-offset-1">
         <div>
-          <?php $pageviewsLink = "<pre>//tools.wmflabs.org/pageviews#project=en.wikipedia.org&amp;pages={{FULLPAGENAMEE}}</pre>"; ?>
+          <?php $pageviewsLink = "<pre>//tools.wmflabs.org/pageviews?project=en.wikipedia.org&amp;pages={{FULLPAGENAMEE}}</pre>"; ?>
           <?php $project = "<code>en.wikipedia.org</code>"; ?>
           <?php $sitematrixLink = "<a href='https://meta.wikimedia.org/w/api.php?action=sitematrix&amp;formatversion=2'>" . strtolower( $I18N->msg( 'project' ) ) . "</a>"; ?>
           <?php $fullpageNamee = "<code>{{FULLPAGENAMEE}}</code>"; ?>
           <?php echo $I18N->msg( 'url-structure-example', array( 'variables' => array( $pageviewsLink, $project, $sitematrixLink, $fullpageNamee ), 'parsemag' => true ) ); ?>
-          <p class="intro">
-            <?php echo $I18N->msg( 'url-structure-hash-param' ); ?>
-          </p>
         </div>
         <div>
           <h3>

tests/initialize.js

@@ -32,7 +32,7 @@ module.exports = {
   },
   'Page loads with values and text matching given params': client => {
     client
-      .url('http://localhost/pageviews/index#start=2016-01-01&end=2016-01-10&project=en.wikivoyage.org&pages=Europe|Asia&platform=desktop&agent=spider')
+      .url('http://localhost/pageviews/index?start=2016-01-01&end=2016-01-10&project=en.wikivoyage.org&pages=Europe|Asia&platform=desktop&agent=spider')
       .waitForElementPresent('canvas', 10000);
 
     client.expect.element('#range-input').to.have.value.that.matches(/0?1\/0?1\/2016 - 0?1\/10\/2016|2016-01-01 - 2016-01-10/);

tests/user_input.js

@@ -59,7 +59,7 @@ module.exports = {
     client.click('.applyBtn');
     client.expect.element('.aqs-chart').to.be.visible.after(10000);
 
-    client.execute('return [$("#range-input").val(), location.hash]', [], response => {
+    client.execute('return [$("#range-input").val(), location.search]', [], response => {
       dates = response.value[0].split(' - ');
       dateRegex = new RegExp(`start=${dates[0]}&end=${dates[1]}`);
       client.expect(response.value[1]).to.match(dateRegex);
@@ -72,7 +72,7 @@ module.exports = {
     client.waitForElementNotVisible('.daterangepicker', 500);
     client.expect.element('.aqs-chart').to.be.visible.after(10000);
 
-    client.execute('return [$("#range-input").val(), location.hash]', [], response => {
+    client.execute('return [$("#range-input").val(), location.search]', [], response => {
       dates = response.value[0].split(' - ');
       client.expect(moment(dates[1]).diff(moment(dates[0]), 'days')).to.equal(6);
       client.expect(response.value[1]).to.match(/range=last-week/);
@@ -82,7 +82,7 @@ module.exports = {
     client.click('.date-latest a:first-child'); // latest 10 days
     client.expect.element('.aqs-chart').to.be.visible.after(10000);
 
-    client.execute('return [$("#range-input").val(), location.hash]', [], response => {
+    client.execute('return [$("#range-input").val(), location.search]', [], response => {
       dates = response.value[0].split(' - ');
       client.expect(moment(dates[0]).isSame(moment().subtract(10, 'days'), 'day'));
       client.expect(moment(dates[1]).isSame(moment(), 'day'));
@@ -98,7 +98,7 @@ module.exports = {
     client.click('#agent-select option:nth-child(3)'); // spider
     client.expect.element('.aqs-chart').to.be.visible.after(10000);
 
-    client.execute('return location.hash', [], response => {
+    client.execute('return location.search', [], response => {
       client.expect(response.value).to.match(/platform=desktop&agent=spider/);
     });
   },
@@ -119,7 +119,7 @@ module.exports = {
     client.click('.select2-results__option:first-child');
     client.expect.element('.aqs-chart').to.be.visible.after(10000);
 
-    client.execute('return [$(".aqs-article-selector").val(), location.hash]', [], response => {
+    client.execute('return [$(".aqs-article-selector").val(), location.search]', [], response => {
       client.expect(_.isEqual(
         response.value[0],
         ['Google']