last changes before BREAKING some shit|

dist/app.js

@@ -5069,7 +5069,7 @@ var app = (function (exports) {
           this.active_page = null;
           // this.nodes = {};
           this.simulation = forceSimulation()
-              .velocityDecay(0.1)
+              //.velocityDecay(0.1)
               .force("link", forceLink().id(d => d.title))
               .force("charge", forceManyBody())
               .force("radial", forceRadial(180, width/2, height/2));
@@ -5085,7 +5085,7 @@ var app = (function (exports) {
       init_svg (svg) {
           this.svg = select(svg || "svg");
           this.zoom = zoom()
-              .scaleExtent([1 / 16, 4])
+              .scaleExtent([1 / 16, 16])
               .on("zoom", () => {
                 this.content.attr("transform", event.transform);
                 // console.log("transform", event.transform, this.content.attr("transform"));
@@ -5296,7 +5296,7 @@ var app = (function (exports) {
           this.historylinks = {};
           this.links = null;
           this.highlight_category = null;
-          this.show_history = false;
+          this.show_history = true;
       }
 
       nodeclick (d, elt) {
@@ -5413,6 +5413,28 @@ var app = (function (exports) {
           cat.append("span").attr("class", "count").html(d => d.tcount);
       }
 
+      async load_legend (src, elt) {
+          var data = await json(src);
+          console.log("load_legend", data);
+          var cat = select(elt)
+              .selectAll("div.cat")
+              .data(data)
+              .enter()
+              .append("div")
+              .attr("class", "cat icon");
+          cat.append("span")
+              .attr("class", "icon")
+              .style("background-image", d => "url("+d.icon+")");
+          cat.append("a")
+              .attr("class", "label")
+              .html(d => d.key)
+              .attr("href", "#").on("click", d => {
+                  event.preventDefault();
+                  this.category_click(d);
+              });
+          cat.append("span").attr("class", "count").html(d => d.tcount);
+      }
+
       category_click (d) {
           console.log("category click", d);
           if (this.highlight_category) {

dist/index.js

@@ -4,6 +4,7 @@
 //     document.getElementById("debug"));
 
 var svg = document.querySelector("#svg"),
+    page = document.querySelector("#page"),
     iframe = document.querySelector("iframe#wikiframe"),
     cats = document.querySelector("#cats"),
     cats_contents = document.querySelector("#cats .body"),
@@ -24,9 +25,14 @@ function resize() {
     g = d.getElementsByTagName('body')[0],
     x = w.innerWidth || e.clientWidth || g.clientWidth,
     y = w.innerHeight|| e.clientHeight|| g.clientHeight;
-    svg.setAttribute("width", x);
+    // svg.setAttribute("width", x);
-    svg.setAttribute("height", y);
+    // svg.setAttribute("height", y);
     //console.log("resize", x, y);
+
+    // Match size of parent
+    svg.setAttribute("width", page.clientWidth);
+    svg.setAttribute("height", page.clientHeight);
+
 }
 resize();
 
@@ -48,7 +54,8 @@ async function doload () {
     console.log("loading map");
     await map.load_json("data/sitemap.json");
     // console.log("loading categories");
-    // await map.load_cats("cats.json", cats_contents);
+    // await map.load_cats("data/cats.json", cats_contents);
+    await map.load_legend("src/legend.json", cats_contents);
     console.log("LOADED!");
     loaded = true;
     if (current_title) {

src/forcenet.js

@@ -18,7 +18,7 @@ export class ForceNet {
         this.active_page = null;
         // this.nodes = {};
         this.simulation = forceSimulation()
-            .velocityDecay(0.1)
+            //.velocityDecay(0.1)
             .force("link", forceLink().id(d => d.title))
             .force("charge", forceManyBody())
             .force("radial", forceRadial(180, width/2, height/2));
@@ -34,7 +34,7 @@ export class ForceNet {
     init_svg (svg) {
         this.svg = select(svg || "svg");
         this.zoom = zoom()
-            .scaleExtent([1 / 16, 4])
+            .scaleExtent([1 / 16, 16])
             .on("zoom", () => {
               this.content.attr("transform", event.transform);
               // console.log("transform", event.transform, this.content.attr("transform"));

src/wiki.js

@@ -106,28 +106,6 @@ export class Page {
     }
     async get_links () {
         return await this.get_prop("links", "pl");
-        // // http://localhost/mw/api.php?action=query&prop=links&titles=Bienvenue_%C3%A0_l%E2%80%99erg
-        // var ret = [];
-        // var url = this.wiki.apiurl+"?action=query&format=json&formatversion=2&prop=links&titles="+encodeURIComponent(this.title);
-        // while (true) {
-        //     var data = await fetchJsonp(url);
-        //     var json = await data.json();
-        //     // console.log("JSON", json);
-        //     if (json.query.pages[0]) {
-        //         var p = json.query.pages[0];
-        //         // extract any missing page info
-        //         if (p.ns && !this.ns) { this.ns = p.ns; }
-        //         if (p.pageid && !this.pageid) { this.pageid = p.pageid; }
-        //     }
-        //     if (json.query.pages[0].links) {
-        //         ret.push.apply(ret, json.query.pages[0].links);
-        //     }
-        //     if (!json.continue) { break; }
-        //     url = this.wiki.apiurl+"?action=query&format=json&formatversion=2&prop=links&plcontinue="+json.continue.plcontinue+"&titles="+encodeURIComponent(this.title);
-        // }
-        // ret = ret.map(x => this.wiki.page_for_object(x));
-        // // map these to page objects
-        // return ret;
     }
     async get_linkshere () {
         return await this.get_prop("linkshere", "lh");

src/wikimap.js

@@ -31,7 +31,7 @@ export class Map {
         this.historylinks = {};
         this.links = null;
         this.highlight_category = null;
-        this.show_history = false;
+        this.show_history = true;
     }
 
     nodeclick (d, elt) {
@@ -148,6 +148,28 @@ export class Map {
         cat.append("span").attr("class", "count").html(d => d.tcount)
     }
 
+    async load_legend (src, elt) {
+        var data = await json(src);
+        console.log("load_legend", data);
+        var cat = select(elt)
+            .selectAll("div.cat")
+            .data(data)
+            .enter()
+            .append("div")
+            .attr("class", "cat icon");
+        cat.append("span")
+            .attr("class", "icon")
+            .style("background-image", d => "url("+d.icon+")");
+        cat.append("a")
+            .attr("class", "label")
+            .html(d => d.key)
+            .attr("href", "#").on("click", d => {
+                event.preventDefault();
+                this.category_click(d);
+            })
+        cat.append("span").attr("class", "count").html(d => d.tcount)
+    }
+
     category_click (d) {
         console.log("category click", d);
         if (this.highlight_category) {

style.css

@@ -78,13 +78,13 @@ body {
     margin: 0;
     padding: 0;
     background: #f1f2f3;
-    overflow: hidden;
+    /*overflow: hidden;*/
 }
 
 
 .links line {
-  /*stroke: #aaa;*/
+  stroke: #aaa;
-  stroke: none;
+  /*stroke: none;*/
 }
 
 .links line.active2 {
@@ -134,7 +134,7 @@ svg g.page {
 svg g.page text {
     visibility: hidden;
     fill: #222;
-    font: 10px sans-serif;
+    font: 12px sans-serif;
 }
 
 svg g.active text {
@@ -171,16 +171,19 @@ use {
 
 
 /* Categories */
-
+#cats .head {
+  display: none;
+}
 #cats {
     display: none;
     position: absolute;
-    left: 0;
+    left: 10px;
-    bottom: 0;
+    bottom: 10px;
 }
 #cats .ocontents {
-    background: #FFFFFFDD;
+    background: #FFFFFFFF;
     display: none;
+    border-radius: 30px;
     /*padding: 5px;*/
     /*box-sizing: border-box;*/
 }
@@ -313,3 +316,19 @@ use {
     position: relative;
     top: 10px;
 }
+
+
+/* MEDIAWIKI PAGE */
+.header-container {
+  display: none !important;
+}
+
+iframe form.header {
+  display: none;
+}
+ul#page-actions {
+  display: none;
+}
+a.talk {
+  display:none;
+}