add input 'gist_id', 'file_name', and submit button

zlargon · zlargon · commit b78c7abc4821 · 2016-04-09T23:26:03.000+08:00
diff --git a/index.html b/index.html
@@ -8,9 +8,17 @@
   <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
 </head>
 <body>
-  <h1>Gist HTML Preview</h1>
-  <p>gistpreview.github.io/?&lt;gist_id&gt;/&lt;file_name&gt;</p>
+  <div class="container">
+    <h2>Gist HTML Preview</h2>
+    <span>https://gistpreview.github.io/?</span>
+    <input type="text" class="form-control input-sm" id="gist_id" placeholder="Gist ID">
+    <span>/</span>
+    <input type="text" class="form-control input-sm" id="file_name" placeholder="File Name">
+    <button id="submit" class="btn btn-primary">Submit</button>
+  </div>
+
   <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>
   <script src="./main.js"></script>
 </body>
 </html>
+
diff --git a/main.js b/main.js
@@ -1,24 +1,50 @@
 (function () {
-  var input = location.search.substring(1).split('/');
-  var gistId = input[0];
-  var fileName = input[1] || 'index.html';
+  document.getElementById('submit').onclick = function () {
+    location.search = document.getElementById('gist_id').value + '/'
+                    + document.getElementById('file_name').value;
+  }
 
+  // 1. check query string
+  var query = location.search.substring(1);
+  if (query.length === 0) {
+    return;
+  }
+
+  // 2. get gist id and file name
+  query = query.split('/');
+  var gistId = query[0];
+  var fileName = query[1];
+
+  // 3. write data to blank
+  document.getElementById('gist_id').value = gistId;
+  document.getElementById('file_name').value = fileName;
+
+  // 4-1. check gist id
+  if (/^[0-9a-f]*$/g.test(gistId) === false) {
+    console.error('Gist Id ' + gistId + ' is invalid')
+    return;
+  }
+
+  // 4-2. check file name
+  if (typeof fileName !== 'string' || fileName.length === 0) {
+    console.error('File Name ' + fileName + ' is invalid');
+    return;
+  }
+
+  // 5. fetch data
   fetch('https://api.github.com/gists/' + gistId)
   .then(function (res) {
     if (res.status !== 200) {
-      var err = new Error(gistId + ' is not found');
-      err.code = 'ENOENT';
-      throw err;
+      throw new Error('Gist Id ' + gistId + ' is not exist');
     }
     return res.json();
   })
   .then(function (info) {
     if (info.files.hasOwnProperty(fileName) === false) {
-      var err = new Error(fileName + ' is not found');
-      err.code = 'ENOENT';
-      throw err;
+      throw new Error('File ' + fileName + ' is not exist');
     }
 
+    // 6. write data
     var content = info.files[fileName].content;
     document.write(content);
   })
