From 7e379b97c93327bd4376f19bb0d0d0d07eab3033 Mon Sep 17 00:00:00 2001 From: Michael Murtaugh Date: Wed, 10 Jul 2019 09:04:59 +0200 Subject: [PATCH] other changes --- dist/app.js | 70 +++++++++-- dist/index.js | 49 ++++---- index.html | 36 ++---- splitscreen.css | 143 +++++++++++++++------- splitscreen.html | 18 +-- src/wikimap.js | 64 ++++++++-- style.css | 305 ++++++++++++++++++++++++++++------------------- 7 files changed, 447 insertions(+), 238 deletions(-) diff --git a/dist/app.js b/dist/app.js index f1bcd5b..90264aa 100644 --- a/dist/app.js +++ b/dist/app.js @@ -3156,6 +3156,12 @@ var app = (function (exports) { var identity$1 = new Transform(1, 0, 0); + transform.prototype = Transform.prototype; + + function transform(node) { + return node.__zoom || identity$1; + } + function nopropagation$1() { event.stopImmediatePropagation(); } @@ -5164,8 +5170,8 @@ var app = (function (exports) { var width = 600, height = 600; + this.zoom_level = opts.zoom || 1.5; this.apiurl = opts.apiurl; - this.init_svg(opts.svg); this.categorylabel = opts.categorylabel || "Category"; this.symbols_src = opts.symbols; this.categorydiv = select(opts.categorydiv); @@ -5178,6 +5184,7 @@ var app = (function (exports) { // this.net = new ForceNet({}); // this.net.on("nodeclick", this.nodeclick.bind(this)); this.svg = null; + this.init_svg(opts.svg); this.historylinks = {}; this.links = null; this.highlight_category = null; @@ -5263,9 +5270,9 @@ var app = (function (exports) { this.rect = this.svg.append("rect") .attr("width", 1000) .attr("height", 1000) - .style("fill", "none") - .style("pointer-events", "all") - .call(this.zoom); + .style("fill", "none"); + // .style("pointer-events", "all") + // .call(this.zoom); this.content = this.svg.append("g") .attr("id", "content"), this.linksg = this.content.append("g") @@ -5354,11 +5361,17 @@ var app = (function (exports) { this.categorydiv .selectAll("div.cat") .classed("highlight", d=> d.page ? d.page.highlight : false); - var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)}; + var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)}; this.update_node_counts(); this.update_graph(data); } + get_nodes () { + var nodes = this.wiki.get_nodes(); + nodes = nodes.filter(d => d.linked || d.active || d.active2 || d.highlight); + return nodes; + } + async set_active_page (page) { console.log("wikimap: set_active_page:", page.title); if (page === this.active_page) { @@ -5403,7 +5416,7 @@ var app = (function (exports) { // return; } else if (page.ns !== 0) { console.log("SPECIAL PAGE", page); - + } else { // LOAD/ENSURE PAGE LINKS var links_out = await page.get_links(); @@ -5420,15 +5433,17 @@ var app = (function (exports) { }); } - this.active_page = page; this.active_page.active = true; this.linked_nodes_set_active(this.active_page, true); + + setTimeout(() => { + this.centerOnItem(page, 1000); + }, 1000); this.events.emit("page", this.active_page); - - var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)}; + var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)}; this.update_node_counts(); this.update_graph(data); // this.update_nodes(); @@ -5623,7 +5638,44 @@ var app = (function (exports) { this.simulation.alpha(0.5).restart(); } + centerOnItem(item, duration) { + var bounds = this.svg.node().getBoundingClientRect(); + var curt = transform(this.rect.node()); + console.log("centerOnItem", this.zoom_level, "item", item); + var zoom_level = this.zoom_level ? this.zoom_level : curt.k; + if (item && item.x !== undefined) { + var transform$1 = function () { + return identity$1 + .translate(bounds.width / 2, bounds.height / 2) + .scale(zoom_level) + .translate(-item.x, -item.y); + }; + if (duration) { + this.rect.transition().duration(duration).call(this.zoom.transform, transform$1); + } else { + this.rect.call(this.zoom.transform, transform$1); + } + } else { + console.log("NO ITEM"); + var transform$1 = function () { + return identity$1 + .scale(1); + }; + this.rect.call(this.zoom.transform, transform$1); + } + } + do_zoom (f, transition) { + this.rect.call(this.zoom.scaleBy, f); + } + + zoom_in () { + this.do_zoom(1.25); + } + + zoom_out () { + this.do_zoom(1/1.25); + } } exports.Map = Map$2; diff --git a/dist/index.js b/dist/index.js index dfa4e5c..6f1ddf8 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,17 +1,17 @@ var svg = document.querySelector("#svg"), - page = document.querySelector("#page"), iframe = document.querySelector("iframe#wikiframe"), - cats = document.querySelector("#cats"), - cats_contents = document.querySelector("#cats .body"), - // cats_thumb = document.querySelector("#cats .thumb"), - allcatscb = document.querySelector("input#allcats"), - historycb = document.querySelector("input#history"), - // current_title = null, - // loaded = false, - wikibaseurl, - wikibasepat; - + map = new app.Map({ + apiurl: "/mw/api.php", + symbols: "src/legend.json", + svg: "#svg", + categorylabel: "Catégorie", + categorydiv: "#cats .body", + zoom: 2.0 + }), + zoom_in = document.querySelector(".leaflet-control-zoom-in"), + zoom_out = document.querySelector(".leaflet-control-zoom-out"), + cats = document.querySelector("#cats"); window.addEventListener("resize", resize); function resize() { @@ -28,29 +28,14 @@ function resize() { // Match size of parent svg.setAttribute("width", page.clientWidth); svg.setAttribute("height", page.clientHeight); - } -resize(); - -var map = new app.Map({ - apiurl: "/mw/api.php", - symbols: "src/legend.json", - svg: "#svg", - categorylabel: "Catégorie", - categorydiv: "#cats .body" -}); async function doload () { + resize(); console.log("map.init"); await map.init(); console.log("map.init: done"); - // await map.load_json("data/sitemap.json"); - // console.log("loading categories"); - // await map.load_cats("data/cats.json", cats_contents); - // await map.load_legend("src/legend.json", cats_contents); - // loaded = true; - map.on("page", function (page) { // console.log("map.page", page.title); var url = page.url(); @@ -59,8 +44,18 @@ async function doload () { iframe.src = url; } }) + zoom_in.addEventListener("click", (e) => { + map.zoom_in(); + }) + zoom_out.addEventListener("click", (e) => { + map.zoom_out(); + }) } window.addEventListener("DOMContentLoaded", doload); iframe.addEventListener("load", function () { map.set_active_url(iframe.contentWindow.location.href); }); + +cats.addEventListener("click", e => { + cats.classList.toggle("expanded"); +}) \ No newline at end of file diff --git a/index.html b/index.html index 60ab9e2..f242c7a 100644 --- a/index.html +++ b/index.html @@ -8,36 +8,26 @@ +
- 

-        

-            

-                
-                

-                    
-                

-        

-    

-    

-        

-        

-            
Liste des catégories

+        

             

-            

-            

-            

+            
?

         

+        

+            

+                +
+                -
+            
  
         

-        

     

+    

+        
+    

+
+

 
-
 
 
 
diff --git a/splitscreen.css b/splitscreen.css
index 9eebded..db16965 100644
--- a/splitscreen.css
+++ b/splitscreen.css
@@ -192,56 +192,39 @@ use {
 
 /* Categories */
 
+#cats .body {
+  display: none;
+}
+
+#cats .placeholder {
+  min-width: 100%;
+  text-align: center;
+  color: gray;
+  font-weight: bold;
+  font-size: 12px;
+}
+#cats.expanded .body {
+  display: block;
+}
+
+#cats.expanded .placeholder {
+  display: none;
+}
+
 #cats {
     /*display: none;*/
     position: absolute;
     left: 10px;
-    bottom: 30px;
+    bottom: 10px;
     background: #FFFFFFFF;
     border-radius: 24px;
     padding: 10px;
     font-size: 12px;
-}
-#cats .head {
-  display: none;
-}
-/* showall class */
-#cats div.cat {
-    display: none;
-}
-#cats div.cat span.spacing {
-    display: none;
-}
-#cats div.cat.icon {
-    display: block;
-    background-position: center center;
-}
-#cats.showall div.cat {
-    display: block;
-}
-#cats.showall div.cat span.spacing {
-    display: inline;
+    min-width: 16px;
+    min-height: 16px;
+    box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
 }
 
-#cats .contents {
-    overflow: auto;
-}
-#cats .contents .scroll {}
-
-#cats .botright {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-}
-
-#cats .botright .thumb {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 32px;
-    height: 32px;
-    background: #FFFFFFDD;
-}
 #cats div.cat span.icon {
     position: relative;
     top: 4px;
@@ -250,6 +233,7 @@ use {
     height: 18px;
     background-repeat: no-repeat;
     margin-right: 4px;
+    background-position: center center;
 }
 #cats div.cat span.count {
   display: none;
@@ -303,4 +287,81 @@ iframe form.header {
 */
 a.talk {
   display:none;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+/* control positioning */
+
+.leaflet-control {
+  position: relative;
+  z-index: 800;
+  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: auto;
+  font-size: 12px;
+}
+.leaflet-control {
+  float: left;
+  clear: both;
+  }
+
+/* general toolbar styles */
+
+.leaflet-bar {
+  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+  }
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  display: block;
+}
+.leaflet-bar a:hover {
+  background-color: #f4f4f4;
+  }
+.leaflet-bar a:first-child {
+  }
+.leaflet-bar a:last-child {
+  border-bottom: none;
+  }
+.leaflet-bar a.leaflet-disabled {
+  cursor: default;
+  background-color: #f4f4f4;
+  color: #bbb;
+  }
+
+
+/* zoom controls */
+
+.zoom-controls {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  z-index: 10000;
+}
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+  font: Combined;
+  font-size: 24px;
+  line-height: 20px;
+  text-indent: 1px;
+  box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
+  background-color: #ffffff;
+}
+
diff --git a/splitscreen.html b/splitscreen.html
index cda7f1a..6e325c5 100644
--- a/splitscreen.html
+++ b/splitscreen.html
@@ -10,18 +10,22 @@
 
     

         
-        

-            

-                
Liste des catégories

-                

-                

-                

-            

+        

+            

+            
?

         

     

     

         
     

+
+

+    

+        +
+        -
+    
  
+

+
 
 
 
diff --git a/src/wikimap.js b/src/wikimap.js
index 27418a3..2a876e0 100644
--- a/src/wikimap.js
+++ b/src/wikimap.js
@@ -1,7 +1,7 @@
 import { event, select, selectAll} from 'd3-selection';
 import { values, set, map } from 'd3-collection';
 import { drag } from 'd3-drag';
-import { zoom } from 'd3-zoom';
+import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
 import { forceSimulation, forceLink, forceManyBody, forceCenter, forceX, forceY, forceRadial } from 'd3-force';
 import { Wiki, Page } from './wiki.js';
 import EventEmitter from 'eventemitter3';
@@ -15,8 +15,8 @@ export class Map {
         var width = 600,
             height = 600;
 
+        this.zoom_level = opts.zoom || 1.5;
         this.apiurl = opts.apiurl;
-        this.init_svg(opts.svg);
         this.categorylabel = opts.categorylabel || "Category";
         this.symbols_src = opts.symbols;
         this.categorydiv = select(opts.categorydiv);
@@ -29,6 +29,7 @@ export class Map {
         // this.net = new ForceNet({});
         // this.net.on("nodeclick", this.nodeclick.bind(this));
         this.svg = null;
+        this.init_svg(opts.svg);
         this.historylinks = {};
         this.links = null;
         this.highlight_category = null;
@@ -114,9 +115,9 @@ export class Map {
         this.rect = this.svg.append("rect")
             .attr("width", 1000)
             .attr("height", 1000)
-            .style("fill", "none")
-            .style("pointer-events", "all")
-            .call(this.zoom);
+            .style("fill", "none");
+            // .style("pointer-events", "all")
+            // .call(this.zoom);
         this.content = this.svg.append("g")
             .attr("id", "content"),
         this.linksg = this.content.append("g")
@@ -205,11 +206,17 @@ export class Map {
         this.categorydiv
             .selectAll("div.cat")
             .classed("highlight", d=> d.page ? d.page.highlight : false);
-        var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)};
+        var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
         this.update_node_counts()
         this.update_graph(data);
     }
 
+    get_nodes () {
+        var nodes = this.wiki.get_nodes();
+        nodes = nodes.filter(d => d.linked || d.active || d.active2 || d.highlight);
+        return nodes;
+    }
+
     async set_active_page (page) {
         console.log("wikimap: set_active_page:", page.title);
         if (page === this.active_page) {
@@ -275,10 +282,13 @@ export class Map {
         this.active_page = page;
         this.active_page.active = true;
         this.linked_nodes_set_active(this.active_page, true);
+        
+        setTimeout(() => {
+            this.centerOnItem(page, 1000);
+        }, 1000);
 
         this.events.emit("page", this.active_page);
-
-        var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)};
+        var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
         this.update_node_counts()
         this.update_graph(data);
         // this.update_nodes();
@@ -475,6 +485,44 @@ export class Map {
         this.simulation.alpha(0.5).restart();
     }
 
+    centerOnItem(item, duration) {
+        var bounds = this.svg.node().getBoundingClientRect();
+        var curt = zoomTransform(this.rect.node());
+        console.log("centerOnItem", this.zoom_level, "item", item);
+        var zoom_level = this.zoom_level ? this.zoom_level : curt.k;
+        var ITEM_SIZE = 36;
+        if (item && item.x !== undefined) {
+            var transform = function () {
+                return zoomIdentity
+                    .translate(bounds.width / 2, bounds.height / 2)
+                    .scale(zoom_level)
+                    .translate(-item.x, -item.y);
+            };
+            if (duration) {
+                this.rect.transition().duration(duration).call(this.zoom.transform, transform);
+            } else {    
+                this.rect.call(this.zoom.transform, transform);
+            }
+        } else {
+            console.log("NO ITEM");
+            var transform = function () {
+                return zoomIdentity
+                    .scale(1);
+            };
+            this.rect.call(this.zoom.transform, transform);
+        }
+    }
 
+    do_zoom (f, transition) {
+        this.rect.call(this.zoom.scaleBy, f);
+    }
+
+    zoom_in () {
+        this.do_zoom(1.25);
+    }
+
+    zoom_out () {
+        this.do_zoom(1/1.25);
+    }
 }
 
diff --git a/style.css b/style.css
index 7cf4c60..75c7034 100644
--- a/style.css
+++ b/style.css
@@ -78,17 +78,16 @@ body {
     margin: 0;
     padding: 0;
     background: #f1f2f3;
-    /*overflow: hidden;*/
+    overflow: hidden;
 }
 
-
 .links line {
   stroke: #aaa;
   /*stroke: none;*/
 }
 
 .links line.active2 {
-    stroke: red;
+    stroke: magenta;
 }
 
 .links line.history {
@@ -96,11 +95,11 @@ body {
 }
 
 .active {
-    stroke: red;
+    stroke: magenta;
 }
 
 .category circle {
-    fill: yellow;
+    fill: cyan;
 }
 
 .web circle {
@@ -134,11 +133,11 @@ svg g.page {
 svg g.page text {
     visibility: hidden;
     fill: #222;
-    font: 12px sans-serif;
+    font: 9px sans-serif;
 }
 
 svg g.active text {
-    visibility: visible;
+    /*visibility: visible;*/
 }
 
 svg g.mouse text {
@@ -150,85 +149,81 @@ use {
     stroke: black;
 }
 
+.highlight use {
+    fill: #FFF;
+    stroke: cyan;
+}
+
+.active use {
+/*  animation-transform: 2;*/
+  animation-duration: 2s;
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.5, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
 .active use {
     fill: #FFF;
-    stroke: red;
+    stroke: magenta;
 }
 
 .active text {
-    stroke: black;
+    stroke: none;
 }
 
 .active2 use {
     fill: #FFF;
-    stroke: red;
+    stroke: magenta;
 }
 
-.highlight use {
-    fill: #FFF;
-    stroke: orange;
-}
 
 
 /* Categories */
-#cats .head {
+
+#cats .body {
   display: none;
 }
+
+#cats .placeholder {
+  min-width: 100%;
+  text-align: center;
+  color: gray;
+  font-weight: bold;
+  font-size: 12px;
+}
+#cats.expanded .body {
+  display: block;
+}
+
+#cats.expanded .placeholder {
+  display: none;
+}
+
 #cats {
-    display: none;
+    /*display: none;*/
     position: absolute;
     left: 10px;
     bottom: 10px;
-}
-#cats .ocontents {
     background: #FFFFFFFF;
-    display: none;
-    border-radius: 30px;
-    /*padding: 5px;*/
-    /*box-sizing: border-box;*/
-}
-#cats.expanded .ocontents {
-    display: block;
+    border-radius: 24px;
+    padding: 10px;
+    font-size: 12px;
+    min-width: 16px;
+    min-height: 16px;
+    box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
 }
 
-/* showall class */
-#cats div.cat {
-    display: none;
-}
-#cats div.cat span.spacing {
-    display: none;
-}
-#cats div.cat.icon {
-    display: block;
-}
-#cats.showall div.cat {
-    display: block;
-}
-#cats.showall div.cat span.spacing {
-    display: inline;
-}
-
-#cats .contents {
-    overflow: auto;
-    height: 50vh;
-    min-width: 300px;
-}
-#cats .contents .scroll {}
-
-#cats .botright {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-}
-
-#cats .botright .thumb {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 32px;
-    height: 32px;
-    background: #FFFFFFDD;
-}
 #cats div.cat span.icon {
     position: relative;
     top: 4px;
@@ -237,8 +232,10 @@ use {
     height: 18px;
     background-repeat: no-repeat;
     margin-right: 4px;
+    background-position: center center;
 }
 #cats div.cat span.count {
+  display: none;
     padding: 0px 3px;
     background: #DDD;
     color: #444;
@@ -249,74 +246,31 @@ use {
     color: black;
     text-decoration: none;
 }
-
-
+#cats div.cat.highlight a {
+    color: cyan;
+}
+#cats hr {
+  color: white;
+}
 
 
 #page {
-    position: absolute;
-    left: 0; right: 0; top: 0;
-    height: 160vh;
-    text-align: center;
+  position: absolute;
+  left: 0; right: 50%;
+  top: 0;
+  bottom: 0;
 }
-#page.touched {
-    background: #444;
-}
-#bottompane {
-    position: absolute;
-    top: 60vh;
-    left: 0; right: 0;
-    height: 100vh;
-    z-index: 2;
-}
-#bottompane #bottompage {
-    position: absolute;
-    left: 0; right: 0;
-    margin: 0 auto;
-    max-width: 800px;
-    background: white;
-    border: 1px solid #E6E6E6;
-    border-radius: 10px;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-}
-#bottompane #menubar {
-    height: 48px;
-    width: 100%;
 
-}
 #wikiframediv {
     position: absolute;
-    left: 0; top: 48px;
+    left: 50%; top: 0;
     right: 0; bottom: 0;
 }
-#bottompane iframe {
-    border: none;
-    width: 100%;
-    height: 100%;
+#wikiframediv iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
 }
-#debug {
-    width: 300px;
-    font-size: 10px;
-    height: 8em;
-    overflow: auto;
-    position: absolute; left: 10px; top: 10px; z-index:23
-}
-
-#searchinput { 
-    min-width: 220px;
-    font-family: "combinedregular";
-    font-size: 11px;
-}
-#menubar {
-    text-align: center;
-}
-#menubar img {
-    position: relative;
-    top: 10px;
-}
-
 
 /* MEDIAWIKI PAGE */
 .header-container {
@@ -326,9 +280,114 @@ use {
 iframe form.header {
   display: none;
 }
-ul#page-actions {
+/*ul#page-actions {
   display: none;
 }
+*/
 a.talk {
   display:none;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+/* control positioning */
+
+.leaflet-control {
+  position: relative;
+  z-index: 800;
+  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: auto;
+  font-size: 12px;
+}
+.leaflet-control {
+  float: left;
+  clear: both;
+  }
+
+/* general toolbar styles */
+
+.leaflet-bar {
+  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+  }
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  display: block;
+}
+.leaflet-bar a:hover {
+  background-color: #f4f4f4;
+  }
+.leaflet-bar a:first-child {
+  }
+.leaflet-bar a:last-child {
+  border-bottom: none;
+  }
+.leaflet-bar a.leaflet-disabled {
+  cursor: default;
+  background-color: #f4f4f4;
+  color: #bbb;
+  }
+
+
+/* zoom controls */
+
+.zoom-controls {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  z-index: 10000;
+}
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+  font: Combined;
+  font-size: 24px;
+  line-height: 20px;
+  text-indent: 1px;
+  box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
+  background-color: #ffffff;
+}
+
+@media only screen and (max-width: 600px) {
+  body {
+    overflow: auto;
+  }
+
+  #container {
+    position: absolute;
+    left: 0; top: 0;
+    right: 0;
+    height: 160vh;
+  }
+
+#page {
+  position: absolute;
+  left: 0; top: 0;
+  height: 60vh;
+    width: 100vw;
+}
+
+#wikiframediv {
+    position: absolute;
+    left: 0; top: 60vh;
+    height: 100vh;
+    width: 100vw;
+}
+
+}