Added functionality to load local json file

Author: mrin9

dist/rapidoc-min.js

@@ -80,7 +80,5 @@ Style the element using standard `css`. Apply borders, padding, width, height et
   </body>  
 ```
 
-
-
 - [Change Attributes using JavaScript](example6.html)
 

dist/rapidoc-min.js.map

@@ -47,7 +47,7 @@
         }
         else if(attr==="spec-url"){
           arr = [
-            "https://api.apis.guru/v2/specs/amazonaws.com/acm/2015-12-08/swagger.json"
+           "https://api.apis.guru/v2/specs/amazonaws.com/acm/2015-12-08/swagger.json"
           ,"https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json", 
           ,"https://api.apis.guru/v2/specs/appveyor.com/0.20181229.0/swagger.json"
           ,"https://raw.githubusercontent.com/APIs-guru/unofficial_openapi_specs/master/github.com/v3/swagger.yaml"

docs/README.md

@@ -148,6 +148,8 @@ class RapiDoc extends LitElement {
         </div>  
         <div style="margin: 0px 8px;display:flex">
           <input id="spec-url" type="text" class="large header-input" placeholder="Spec URL" value="${this.specUrl}" @change="${this.onSepcUrlChange}">
+          <input id="spec-file" type="file" style="display:none" value="${this.specFile}" @change="${this.onSepcFileChange}" >
+          <button class="m-btn" style="margin-left:10px;"  @click="${this.onFileLoadClick}"> LOCAL JSON FILE </button>
         </div>
         <div style="flex:1"></div>  
       </div>`}
@@ -196,10 +198,8 @@ class RapiDoc extends LitElement {
 
     static get properties() {
       return {
-        specUrl: {
-          type: String, 
-          attribute: 'spec-url',
-        },
+        specUrl : { type: String, attribute: 'spec-url',},
+        specFile: { type: String, attribute: false,},
         headingText : {type: String, attribute: 'heading-text' },
         headerColor : {type: String, attribute: 'header-color' },
         primaryColor: {type: String, attribute: 'primary-color'},
@@ -216,21 +216,42 @@ class RapiDoc extends LitElement {
     }
     attributeChangedCallback(name, oldVal, newVal) {
       if (name=='spec-url'){
+        console.log("url changed")
         if (oldVal !== newVal){
           this.loadSpec(newVal);
         }
       }
       super.attributeChangedCallback(name, oldVal, newVal);
     }
 
-    onOpenSpecClicked(e) {
-        this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
+    onSepcUrlChange(e){
+      this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
     }
 
-    onSepcUrlChange(e){
-      if (this.specUrl){
-        this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
+    onSepcFileChange(e){
+      let me = this;
+      this.setAttribute('spec-file', this.shadowRoot.getElementById('spec-file').value);
+      let specFile = e.target.files[0];
+      let reader = new FileReader();
+      reader.onload = function(e) {
+        try{
+          let specObj = JSON.parse(reader.result);
+          me.loadSpec(specObj);
+          me.shadowRoot.getElementById('spec-url').value="";
+        }
+        catch{
+          alert("Unable to read or parse json");
+          console.log("Unable to read or parse json")
+        }
+        
       }
+      // Read the Text file
+      reader.readAsText(specFile);	
+
+    }
+
+    onFileLoadClick(){
+      this.shadowRoot.getElementById('spec-file').click();
     }
 
     loadSpec(specUrl) {
@@ -247,6 +268,7 @@ class RapiDoc extends LitElement {
       })
       .catch(function(err) {
         me.loading=false;
+        alert("The API Spec is invalid or not readable ");
         console.error('Onoes! The API is invalid. ' + err.message);
       });
     }

docs/example6.html

@@ -6,11 +6,11 @@ export default html`
     .regular-font{font-family:var(--font-regular);}
     .mono-font{font-family:var(--font-mono);}
 
-    h1{ font-family:var(--font-regular); font-size:26px; font-weight:200; letter-spacing:normal; }
-    h2{ font-family:var(--font-regular); font-size:24px; font-weight:200; letter-spacing:normal; }
-    h3{ font-family:var(--font-regular); font-size:22px; font-weight:200; letter-spacing:normal; }
-    h4{ font-family:var(--font-regular); font-size:18px; font-weight:200; letter-spacing:normal; }
-    h5{ font-family:var(--font-regular); font-size:16px; font-weight:200; letter-spacing:normal; }
+    h1{ font-family:var(--font-regular); font-size:20px; font-weight:200; letter-spacing:normal; }
+    h2{ font-family:var(--font-regular); font-size:18px; font-weight:200; letter-spacing:normal; }
+    h3{ font-family:var(--font-regular); font-size:16px; font-weight:200; letter-spacing:normal; }
+    h4{ font-family:var(--font-regular); font-size:15px; font-weight:200; letter-spacing:normal; }
+    h5{ font-family:var(--font-regular); font-size:14px; font-weight:200; letter-spacing:normal; }
     h6{ font-family:var(--font-regular); font-size:14px; font-weight:200; letter-spacing:normal; }
 
     h1,h2,h3,h4,h5,h5{
@@ -51,9 +51,9 @@ export default html`
     }
 
     .m-sub-title.m-3 {
-        font-size: 12px;
-        font-weight:bold;
-        margin: 12px 0 4px 0;
+      font-size: 12px;
+      font-weight:bold;
+      margin: 12px 0 4px 0;
     }
 
     /* Markdown */
@@ -64,7 +64,8 @@ export default html`
         margin-top:0;
     }
     .m-markdown p{
-        line-height: 16px;
+        line-height:16px;
+        font-size:14px;
     }
     .m-markdown code{
         background-color: rgba(0, 0, 0, 0.02);

docs/rapidoc-min.js

@@ -160,6 +160,7 @@ export default function ProcessSpec(specUrl){
         return Promise.resolve(parsedSpec);
     })
     .catch(function(err) {
+        alert(err);
         console.error(err);
     });