[change] Add support to narrow screen #115

closes #115
openwisp · Jul 26, 2022 · 83189c6 · 83189c6
1 parent b308c54
commit 83189c6
Show file tree

Hide file tree

Showing 21 changed files with 1,678 additions and 1,477 deletions.
diff --git a/examples/netjson-dateParse.html b/examples/netjson-dateParse.html
@@ -1,51 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <title>netjsongraph.js: basic example</title>
-    <meta charset="utf-8">
-    <!-- theme can be easily customized via css -->
-    <link href="../src/css/netjsongraph-theme.css" rel="stylesheet">
-    <link href="../src/css/netjsongraph.css" rel="stylesheet">
+  <title>netjsongraph.js: basic example</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- theme can be easily customized via css -->
+  <link href="../src/css/netjsongraph-theme.css" rel="stylesheet">
+  <link href="../src/css/netjsongraph.css" rel="stylesheet">
+  <style>
+    .njg-date {
+      height: fit-content;
+      text-align: center;
+    }
+
+    @media only screen and (max-width: 500px) {
+      .njg-date {
+        bottom: 80px;
+        width: 100vw;
+        right: unset;
+      }
+    }
+  </style>
 </head>
+
 <body>
-    <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
-    <script type="text/javascript">
-        /*
-            The demo is used to show the use of the `dataParse` function.
-            You can set the node or link property value `time`, we will call this function to parse the string in the element details defaultly.
-            Of course you can also call directly.
-        */
-        // `graph` render defaultly.
-        const graph = new NetJSONGraph("./data/netjsonmap.json", {
-            // Convert to internal json format，add `time` field.
-            prepareData: data => {
-                data.nodes.map(node => {
-                    node.label = node.name;
-                    node.properties = node.properties || {};
-                    node.properties.time = node.properties.time || "2000-01-01T00:00:00.000Z"
-                })
-                data.links.map(link => {
-                    link.properties = link.properties || {};
-                    link.properties.time = link.properties.time || "1999-12-31T23:59:59.999Z"
-                })
-            },
+  <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
+  <script type="text/javascript">
+    /*
+        The demo is used to show the use of the `dataParse` function.
+        You can set the node or link property value `time`, we will call this function to parse the string in the element details defaultly.
+        Of course you can also call directly.
+    */
+    // `graph` render defaultly.
+    const graph = new NetJSONGraph("./data/netjsonmap.json", {
+      // Convert to internal json format，add `time` field.
+      prepareData: data => {
+        data.nodes.map(node => {
+          node.label = node.name;
+          node.properties = node.properties || {};
+          node.properties.time = node.properties.time || "2000-01-01T00:00:00.000Z"
+        })
+        data.links.map(link => {
+          link.properties = link.properties || {};
+          link.properties.time = link.properties.time || "1999-12-31T23:59:59.999Z"
+        })
+      },
+    });
+
+    graph.render();
+
+    (function addDateParse(_this) {
+      const dateNode = document.createElement("span"),
+        // Try to call the function directly.
+        // The exec result must be [date, year, month, day, hour, minute, second, millisecond?]
+        dateResult = _this.utils.dateParse({
+          dateString: "2019-04-03T05:06:54.000Z",
+          parseRegular: /^([1-9]\d{3})-(\d{1,2})-(\d{1,2})T(\d{1,2}):(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?Z$/,
         });
-
-        graph.render();
 
-        (function addDateParse(_this){
-            const dateNode = document.createElement("span"),
-              // Try to call the function directly.
-              // The exec result must be [date, year, month, day, hour, minute, second, millisecond?]
-              dateResult = _this.utils.dateParse({
-                dateString: "2019-04-03T05:06:54.000Z",
-                parseRegular: /^([1-9]\d{3})-(\d{1,2})-(\d{1,2})T(\d{1,2}):(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?Z$/,
-              });
-
-            dateNode.setAttribute("title", dateResult);
-            dateNode.setAttribute("class", "njg-date");
-            dateNode.innerHTML = "Incoming Time: " + dateResult;
-            _this.el.appendChild(dateNode);
-        })(graph)   
-    </script>
-</html>
+      dateNode.setAttribute("title", dateResult);
+      dateNode.setAttribute("class", "njg-date");
+      dateNode.innerHTML = "Incoming Time: " + dateResult;
+      _this.el.appendChild(dateNode);
+    })(graph)   
+  </script>
+</body>
+
+</html>
diff --git a/examples/netjson-multipleInterfaces.html b/examples/netjson-multipleInterfaces.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>netjsongraph.js: basic example</title>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- theme can be easily customized via css -->
     <link href="../src/css/netjsongraph-theme.css" rel="stylesheet">
     <link href="../src/css/netjsongraph.css" rel="stylesheet">
 </head>
+
 <body>
     <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
     <script type="text/javascript">
@@ -24,4 +27,5 @@
         graph.render();
     </script>
 </body>
-</html>
+
+</html>
diff --git a/examples/netjson-searchElements.html b/examples/netjson-searchElements.html
@@ -1,102 +1,140 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>netjsongraph.js: basic example</title>
-    <meta charset="utf-8" />
-    <!-- theme can be easily customized via css -->
-    <link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../src/css/netjsongraph.css" rel="stylesheet" />
-  </head>
-  <body>
-    <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
-    <script type="text/javascript">
-      /*
-            The demo is used to show the use of the `searchElements` function.
-            For test, you can input `test` and click the `search` button.
-            See the following comments for details.
-        */
-      // `graph` render defaultly.
-      let graph = new NetJSONGraph("./data/netjsonmap.json", {
-        onLoad: function () {
-          const gui = this.utils.getGUI(this);
-          gui.init();
-          if (this.config.metadata) {
-            gui.createAboutContainer(graph);
-            this.utils.updateMetadata.call(this);
-          }
-          if (this.config.switchMode) {
-            gui.renderModeSelector.onclick = () => {
-              if (this.config.render === this.utils.mapRender) {
-                this.config.render = this.utils.graphRender;
-                this.echarts.dispose();
-                graph = new NetJSONGraph(this.data, {
-                  ...this.config,
-                });
-                graph.render();
-              } else {
-                this.config.render = this.utils.mapRender;
-                this.config.render(this.data, this);
-              }
-            };
+
+<head>
+  <title>netjsongraph.js: basic example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="utf-8" />
+  <!-- theme can be easily customized via css -->
+  <link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
+  <link href="../src/css/netjsongraph.css" rel="stylesheet" />
+  <style>
+    .njg-searchBtn {
+      border: none;
+      border-radius: 5px;
+      padding: 4px 8px;
+    }
+
+    .njg-searchInput {
+      /* width: 250px;
+      height: 20px; */
+      padding: 4px;
+      border-radius: 5px;
+      border: none;
+    }
+
+    @media only screen and (max-width: 500px) {
+      .njg-searchContainer {
+        left: 25%;
+      }
+
+      .njg-searchInput {
+        width: 60%;
+      }
+
+      .njg-searchBtn {
+        border: none;
+        border-radius: 5px;
+      }
+    }
+  </style>
+
+</head>
+
+<body>
+  <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
+  <script type="text/javascript">
+    /*
+          The demo is used to show the use of the `searchElements` function.
+          For test, you can input `test` and click the `search` button.
+          See the following comments for details.
+      */
+    // `graph` render defaultly.
+    let graph = new NetJSONGraph("./data/netjsonmap.json", {
+      onLoad: function () {
+        let searchContainer = document.createElement("div"),
+          searchInput = document.createElement("input"),
+          searchBtn = document.createElement("button"),
+          /*
+                      Pass in the url to listen to, and save the returned function.
+                      Please ensure that the return value of the api is the specified json format.
+                  */
+          searchFunc = this.utils.searchElements.call(
+            this,
+            "https://ee3bdf59-d14c-4280-b514-52bd3dfc2c17.mock.pstmn.io/?search=",
+          );
+
+        searchInput.setAttribute("class", "njg-searchInput");
+        searchInput.placeholder =
+          "Input value for searching special elements.";
+        searchBtn.setAttribute("class", "njg-searchBtn");
+        searchBtn.innerHTML = "search";
+        searchContainer.setAttribute("class", "njg-searchContainer");
+        searchContainer.appendChild(searchInput);
+        searchContainer.appendChild(searchBtn);
+        this.el.appendChild(searchContainer);
+
+        searchInput.onchange = () => {
+          // do something to deal user input value.
+        };
+
+        searchBtn.onclick = () => {
+          let inputValue = searchInput.value.trim();
+
+          /*
+                      Pass in the relevant search value,
+                      which will re-render automatically according to the request result within the function.
+                  */
+          if (inputValue === "appendData") {
+            // appendData
+            searchFunc(inputValue, false);
+          } else {
+            searchFunc(inputValue);
           }
-          this.config.onClickElement = (type, data) => {
-            let nodeLinkData;
-            if (type === "node") {
-              nodeLinkData = this.utils.nodeInfo(data);
-            } else {
-              nodeLinkData = this.utils.linkInfo(data);
-            }
-            gui.getNodeLinkInfo(type, nodeLinkData);
-            gui.sideBar.classList.remove("hidden");
-          };
-          let searchContainer = document.createElement("div"),
-            searchInput = document.createElement("input"),
-            searchBtn = document.createElement("button"),
-            /*
-                        Pass in the url to listen to, and save the returned function.
-                        Please ensure that the return value of the api is the specified json format.
-                    */
-            searchFunc = this.utils.searchElements.call(
-              this,
-              "https://ee3bdf59-d14c-4280-b514-52bd3dfc2c17.mock.pstmn.io/?search=",
-            );
-
-          searchInput.setAttribute("class", "njg-searchInput");
-          searchInput.placeholder =
-            "Input value for searching special elements.";
-          searchBtn.setAttribute("class", "njg-searchBtn");
-          searchBtn.innerHTML = "search";
-          searchContainer.setAttribute("class", "njg-searchContainer");
-          searchContainer.appendChild(searchInput);
-          searchContainer.appendChild(searchBtn);
-          this.el.appendChild(searchContainer);
-
-          searchInput.onchange = () => {
-            // do something to deal user input value.
-          };
 
-          searchBtn.onclick = () => {
-            let inputValue = searchInput.value.trim();
+          searchInput.value = "";
 
-            /*
-                        Pass in the relevant search value,
-                        which will re-render automatically according to the request result within the function.
-                    */
-            if (inputValue === "appendData") {
-              // appendData
-              searchFunc(inputValue, false);
+        };
+        const gui = this.utils.getGUI(this);
+        gui.init();
+        if (this.config.metadata) {
+          gui.createAboutContainer(graph);
+          this.utils.updateMetadata.call(this);
+        }
+        if (this.config.switchMode) {
+          gui.renderModeSelector.onclick = () => {
+            if (this.config.render === this.utils.mapRender) {
+              this.config.render = this.utils.graphRender;
+              this.echarts.dispose();
+              graph = new NetJSONGraph(this.data, {
+                ...this.config,
+              });
+              graph.render();
             } else {
-              searchFunc(inputValue);
+              this.config.render = this.utils.mapRender;
+              this.config.render(this.data, this);
+              const sidebar = gui.sideBar;
+              this.el.appendChild(sidebar);
             }
-
-            searchInput.value = "";
           };
+        }
+        this.config.onClickElement = (type, data) => {
+          let nodeLinkData;
+          if (type === "node") {
+            nodeLinkData = this.utils.nodeInfo(data);
+          } else {
+            nodeLinkData = this.utils.linkInfo(data);
+          }
+          gui.getNodeLinkInfo(type, nodeLinkData);
+          gui.sideBar.classList.remove("hidden");
+        };
+
+        this.utils.hideLoading();
+      },
+    });
 
-          this.utils.hideLoading();
-        },
-      });
+    graph.render();
+  </script>
+</body>
 
-      graph.render();
-    </script>
-  </body>
-</html>
+</html>