Adding support for query params to filter content

Examples:

- ?lang=en
- ?tags=jeux,prog
- ?tags=jeux&tags=prog

.travis.yml

@@ -6,3 +6,6 @@ install:
 script:
   - pre-commit run --all-files
   - ./run.sh test_ludochaordic
+notifications:
+  email:
+    on_success: never

static/bundle-SHARE-0-MG_FILTER_TAGS-1-SHORTSHA1-b4c4e94.js

@@ -20,6 +20,18 @@ if(e=u.split("-"),h=d[u]?d[u]:d["bottom-left"],this.justified&&this.justified.le
 
   window.tagFilters = {};
 
+  function parseQuery(queryString) {
+    let query = {};
+    (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&').forEach(pair => {
+        pair = pair.split('=');
+        let name = decodeURIComponent(pair[0]);
+        let values = decodeURIComponent(pair[1] || '').split(',');
+        if (!query[name]) { query[name] = []; }
+        Array.prototype.push.apply(query[name], values);
+    });
+    return query;
+  }
+
   function includes(anArray, value) {
     return anArray.indexOf(value) >= 0;
   }
@@ -70,10 +82,10 @@ if(e=u.split("-"),h=d[u]?d[u]:d["bottom-left"],this.justified&&this.justified.le
     updateArticlesVisibility();
   };
 
-  window.toggleLangTagFilter = function toggleLangTagFilter(langs) {
+  window.toggleLangTagFilter = function toggleLangTagFilter(newLang) {
     let lang = this.textContent;
     window.tagFilters[`lang:${ lang }`] = undefined;
-    lang = langs[langs.indexOf(lang) + 1];
+    lang = newLang || window.langs[langs.indexOf(lang) + 1];
     if (typeof lang === 'undefined') {
       lang = 'lang';
       this.title = 'Language filter (disabled)';
@@ -84,4 +96,18 @@ if(e=u.split("-"),h=d[u]?d[u]:d["bottom-left"],this.justified&&this.justified.le
     this.textContent = lang;
     updateArticlesVisibility();
   };
+
+  let queryParams = parseQuery(window.location.search);
+  for (let [qpName, qpValue] of Object.entries(queryParams)) {
+    if (!qpValue) { continue; }
+    if (qpName === 'lang') {
+        let buttonElem = document.getElementById('lang-tag-filter');
+        window.toggleLangTagFilter.bind(buttonElem)(qpValue[0]);
+    } else if (qpName === 'tags') {
+        qpValue.forEach(tag => {
+          let buttonElem = document.getElementById(tag + '-tag-filter');
+          window.toggleTagFilter.bind(buttonElem)(tag);
+        });
+    }
+  }
 }());

static/bundle-SHARE-1-MG_FILTER_TAGS-1-SHORTSHA1-b4c4e94.js

@@ -266,6 +266,18 @@ $(document).ready(() => {
 
   window.tagFilters = {};
 
+  function parseQuery(queryString) {
+    let query = {};
+    (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&').forEach(pair => {
+        pair = pair.split('=');
+        let name = decodeURIComponent(pair[0]);
+        let values = decodeURIComponent(pair[1] || '').split(',');
+        if (!query[name]) { query[name] = []; }
+        Array.prototype.push.apply(query[name], values);
+    });
+    return query;
+  }
+
   function includes(anArray, value) {
     return anArray.indexOf(value) >= 0;
   }
@@ -316,10 +328,10 @@ $(document).ready(() => {
     updateArticlesVisibility();
   };
 
-  window.toggleLangTagFilter = function toggleLangTagFilter(langs) {
+  window.toggleLangTagFilter = function toggleLangTagFilter(newLang) {
     let lang = this.textContent;
     window.tagFilters[`lang:${ lang }`] = undefined;
-    lang = langs[langs.indexOf(lang) + 1];
+    lang = newLang || window.langs[langs.indexOf(lang) + 1];
     if (typeof lang === 'undefined') {
       lang = 'lang';
       this.title = 'Language filter (disabled)';
@@ -330,4 +342,18 @@ $(document).ready(() => {
     this.textContent = lang;
     updateArticlesVisibility();
   };
+
+  let queryParams = parseQuery(window.location.search);
+  for (let [qpName, qpValue] of Object.entries(queryParams)) {
+    if (!qpValue) { continue; }
+    if (qpName === 'lang') {
+        let buttonElem = document.getElementById('lang-tag-filter');
+        window.toggleLangTagFilter.bind(buttonElem)(qpValue[0]);
+    } else if (qpName === 'tags') {
+        qpValue.forEach(tag => {
+          let buttonElem = document.getElementById(tag + '-tag-filter');
+          window.toggleTagFilter.bind(buttonElem)(tag);
+        });
+    }
+  }
 }());

static/js/filter-tags.js

@@ -9,6 +9,18 @@
 
   window.tagFilters = {};
 
+  function parseQuery(queryString) {
+    let query = {};
+    (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&').forEach(pair => {
+        pair = pair.split('=');
+        let name = decodeURIComponent(pair[0]);
+        let values = decodeURIComponent(pair[1] || '').split(',');
+        if (!query[name]) { query[name] = []; }
+        Array.prototype.push.apply(query[name], values);
+    });
+    return query;
+  }
+
   function includes(anArray, value) {
     return anArray.indexOf(value) >= 0;
   }
@@ -59,10 +71,10 @@
     updateArticlesVisibility();
   };
 
-  window.toggleLangTagFilter = function toggleLangTagFilter(langs) {
+  window.toggleLangTagFilter = function toggleLangTagFilter(newLang) {
     let lang = this.textContent;
     window.tagFilters[`lang:${ lang }`] = undefined;
-    lang = langs[langs.indexOf(lang) + 1];
+    lang = newLang || window.langs[langs.indexOf(lang) + 1];
     if (typeof lang === 'undefined') {
       lang = 'lang';
       this.title = 'Language filter (disabled)';
@@ -73,4 +85,18 @@
     this.textContent = lang;
     updateArticlesVisibility();
   };
+
+  let queryParams = parseQuery(window.location.search);
+  for (let [qpName, qpValue] of Object.entries(queryParams)) {
+    if (!qpValue) { continue; }
+    if (qpName === 'lang') {
+        let buttonElem = document.getElementById('lang-tag-filter');
+        window.toggleLangTagFilter.bind(buttonElem)(qpValue[0]);
+    } else if (qpName === 'tags') {
+        qpValue.forEach(tag => {
+          let buttonElem = document.getElementById(tag + '-tag-filter');
+          window.toggleTagFilter.bind(buttonElem)(tag);
+        });
+    }
+  }
 }());

templates/base.html

@@ -266,7 +266,7 @@
     </div>
 </aside>
 
-<script src="{{SITEURL}}/theme/bundle-SHARE-{{SHARE|string|first|length|string|first}}-MG_FILTER_TAGS-{{MG_FILTER_TAGS|string|first|length|string|first}}-SHORTSHA1-004a392.js"></script>
+<script src="{{SITEURL}}/theme/bundle-SHARE-{{SHARE|string|first|length|string|first}}-MG_FILTER_TAGS-{{MG_FILTER_TAGS|string|first|length|string|first}}-SHORTSHA1-b4c4e94.js"></script>
 
 {% include 'disqus_count.html' %}
 {% include 'analytics.html' %}

templates/index.html

@@ -4,13 +4,16 @@
 
 {% block header_extra %}
 {% if MG_LANG_FILTER_TAGS or MG_FILTER_TAGS %}
+<script>
+window.langs = {{ MG_LANG_FILTER_TAGS|tojson }};
+</script>
 <ul class="mg-tag-filters">
 {% if MG_LANG_FILTER_TAGS %}
-<li><button class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)({{ MG_LANG_FILTER_TAGS|tojson }})' title="Language filter (disabled)">lang</button></li>
+<li><button id="lang-tag-filter" class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)()' title="Language filter (disabled)">lang</button></li>
 {% endif %}
 {% if MG_FILTER_TAGS %}
 {% for filter_tag in MG_FILTER_TAGS %}
-<li><button class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')" title="Tag filter (disabled)">{{ filter_tag.replace('lang:', '') }}</button></li>
+<li><button id="{{ filter_tag }}-tag-filter" class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')" title="Tag filter (disabled)">{{ filter_tag }}</button></li>
 {% endfor %}
 </ul>
 {% endif %}