Add final HTML file

X140Yu · X140Yu · commit d39103fc6951 · 2018-10-29T15:50:43.000+08:00
diff --git a/lib/cocoapods-dependency/command/dependency.rb b/lib/cocoapods-dependency/command/dependency.rb
@@ -1,6 +1,7 @@
 require 'cocoapods-dependency/analyze'
 require 'pp'
 require 'cocoapods-dependency/visual_out'
+require 'tmpdir'
 
 module Pod
   class Command
@@ -32,7 +33,13 @@ def run
         analyze_result = CocoapodsDependency::Analyzer.analyze_with_podfile(nil, config.podfile)
         if @using_visual_output
           helper = CocoapodsDependency::VisualOutHelper.new(analyze_result)
-          helper.write_json_to_file('/tmp/index.json')
+          final_path = Dir.tmpdir
+          helper.write_json_to_file("#{final_path}/index.json")
+          html_path = File.expand_path("../resources/index.html", __dir__)
+          system "cp #{html_path} #{final_path}"
+          final_html_path = "#{final_path}/index.html"
+          puts "[CocoapodsDependency] ✅ html file generated at path #{final_html_path}"
+          system "open #{final_html_path}"
         else
           pp result
         end
diff --git a/lib/cocoapods-dependency/resources/index.html b/lib/cocoapods-dependency/resources/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Dependency Checker for CocoaPods Projects</title>
+  <style type="text/css">
+      #nav a {
+        display: block;
+      }
+
+      html,
+      body {
+        height: 100%;
+      }
+
+      #nav {
+        padding: 10px 30px;
+        float: left;
+        width: 30%;
+        height: 100%;
+        overflow: scroll;
+      }
+
+      #content {
+        padding: 10px 30px;
+        float: left;
+        width: 60%;
+        height: 100%;
+        overflow: scroll;
+      }        
+  </style>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+
+  <body onload="pageDidLoad()">
+  <script>
+
+    function loadJSON(fileName, callback) {   
+      var xobj = new XMLHttpRequest();
+      xobj.overrideMimeType("application/json");
+      xobj.open('GET', fileName, true);
+      xobj.onreadystatechange = function () {
+        if (xobj.readyState == 4 && xobj.status == "200") {
+          callback(xobj.responseText);
+        }
+      };
+      xobj.send(null);
+    }
+
+    function pageDidLoad() {
+      loadJSON('index.json', response => {
+        var actual_JSON = JSON.parse(response);
+
+        let podNames = actual_JSON.links.map(s => s.source);
+
+        renderNavs(podNames)
+        renderPods(actual_JSON.links)
+      });
+    }
+
+    function renderNavs(podNames) {
+      let fLeft = document.getElementById('nav')
+      podNames.forEach(e => {
+        let nav = document.createElement('a')
+        nav.href = '#' + e
+        nav.innerText = e
+        fLeft.appendChild(nav)
+      })
+    }
+
+    function renderPods(pods) {
+      let d = document.getElementById('pods')
+      pods.forEach(element => {
+        let div = document.createElement('div')
+        let header = document.createElement('h3')
+        header.innerHTML = element.source
+        header.id = element.source
+        
+        div.appendChild(header)
+        
+        let ul = document.createElement('ul')
+        let dependencies = element.dependencies.sort()
+        dependencies.forEach(dependency => {
+          let li = document.createElement('li')
+          let a = document.createElement('a')
+          a.innerHTML = dependency
+          a.href = '#' + dependency
+          ul.appendChild(li)
+          li.appendChild(a)
+        })
+      
+        div.appendChild(ul)      
+        d.appendChild(div)
+      })
+    }
+
+  </script>
+</head>
+
+<body>
+  <div id="nav">
+
+  </div>
+  <div id="content">
+    <div id="pods"></div>
+  </div>
+</body>
+
+</html>
