Added upload box to test out files

bf1dc1d5 · Phil Hughes · 900c925e · bf1dc1d5 · bf1dc1d5 · bf1dc1d5
Commit bf1dc1d5 authored 7 years ago by Phil Hughes
--- a/dist/notebooklab.js
+++ b/dist/notebooklab.js
@@ -103,9 +103,10 @@
  template: `
    <div v-if="hasNotebook">
      <component
-        v-for="cell in notebook.cells"
+        v-for="(cell, index) in notebook.cells"
        :is="cellType(cell.cell_type)"
-        :cell="cell" />
+        :cell="cell"
+        :key="index" />
    </div>
  `,
  components: {

--- a/index.html
+++ b/index.html
 <head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
@@ -9,31 +10,29 @@
  <script src="dist/notebooklab.js"></script>
 </head>
 <body>
-  <div id="app">
-    <div v-if="loading">
-      Loading...
-    </div>
+  <div id="app" class="container-fluid">
+    <input
+      type="file"
+      @change="openFile($event)"
+      v-if="!json" />
    <notebook-lab
-      v-if="!loading"
+      v-if="json"
      :notebook="json"></notebook-lab>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
-        loading: true,
-        json: {},
+        json: false,
      },
-      mounted() {
-        const url = 'https://rawgit.com/rasbt/algorithms_in_ipython_notebooks/master/ipython_nbs/data-structures/stacks.ipynb';
-        fetch(url)
-          .then((res) => {
-            return res.json();
-          })
-          .then((json) => {
-            this.json = json;
-            this.loading = false;
-          });
+      methods: {
+        openFile(e) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            this.json = JSON.parse(e.target.result);
+          };
+          reader.readAsText(e.target.files[0]);
+        },
      },
    });
  </script>

--- a/src/index.js
+++ b/src/index.js
@@ -7,9 +7,10 @@ export default {
  template: `
    <div v-if="hasNotebook">
      <component
-        v-for="cell in notebook.cells"
+        v-for="(cell, index) in notebook.cells"
        :is="cellType(cell.cell_type)"
-        :cell="cell" />
+        :cell="cell"
+        :key="index" />
    </div>
  `,
  components: {

--- a/styles/main.css
+++ b/styles/main.css
@@ -3,6 +3,7 @@
 .output {
  display: flex;
  width: 100%;
+  margin-bottom: 10px;
 }
  
 .cell:not(.text-cell) {
@@ -11,12 +12,13 @@
  
 .prompt {
  padding: 0 10px;
-  min-width: 6em;
+  min-width: 7em;
  font-family: monospace;
 }
  
 .cell pre {
  margin: 0;
+  width: 100%;
 }
  
 .markdown .katex {