Add web demo options to load example file or load from a URL (nightlark#69)

* Add web demo option to load an example file
* Give a hover and drag effect for the Choose MSI button

Author: nightlark

docs/_static/example.msi

@@ -28,6 +28,7 @@ class MSIViewer {
     this.streamsContent = document.getElementById('streams-content');
     this.tabButtons = document.querySelectorAll('.tab-button');
     this.tabPanes = document.querySelectorAll('.tab-pane');
+    this.loadExampleFileButton = document.getElementById('load-example-file-button');
   }
 
   // Set up event listeners
@@ -43,6 +44,9 @@ class MSIViewer {
         this.switchTab(tabName);
       });
     });
+
+    // New file loading buttons
+    this.loadExampleFileButton.addEventListener('click', this.handleLoadExampleFile.bind(this));
   }
 
   // Switch between tabs
@@ -100,18 +104,14 @@ class MSIViewer {
     }
   }
 
-  // Handle file selection
-  async handleFileSelect(event) {
-    if (!this.fileInput.files || this.fileInput.files.length === 0) return;
-
-    const file = this.fileInput.files[0];
-    this.currentFileName = file.name;
+  // Load MSI file from ArrayBuffer (used for file input, example, and URL)
+  async loadMsiFileFromArrayBuffer(arrayBuffer, fileName = 'uploaded.msi') {
+    this.currentFileName = fileName;
     this.loadingIndicator.style.display = 'block';
     this.loadingIndicator.textContent = 'Reading MSI file...';
 
     try {
       // Read the file as an ArrayBuffer
-      const arrayBuffer = await file.arrayBuffer();
       const msiBinaryData = new Uint8Array(arrayBuffer);
 
       // Write the file to Pyodide's virtual file system
@@ -151,6 +151,31 @@ class MSIViewer {
     }
   }
 
+  // Handle file selection
+  async handleFileSelect(event) {
+    if (!this.fileInput.files || this.fileInput.files.length === 0) return;
+
+    const file = this.fileInput.files[0];
+    const arrayBuffer = await file.arrayBuffer();
+    await this.loadMsiFileFromArrayBuffer(arrayBuffer, file.name);
+  }
+
+  // Handle loading the example file from the server
+  async handleLoadExampleFile() {
+    const exampleUrl = '_static/example.msi';
+    this.loadingIndicator.style.display = 'block';
+    this.loadingIndicator.textContent = 'Fetching example file...';
+    try {
+      const response = await fetch(exampleUrl);
+      if (!response.ok) throw new Error(`Failed to fetch example file (${response.status})`);
+      const arrayBuffer = await response.arrayBuffer();
+      await this.loadMsiFileFromArrayBuffer(arrayBuffer, 'example.msi');
+    } catch (error) {
+      this.loadingIndicator.textContent = `Error loading example file: ${error.message}`;
+      console.error('Error loading example file:', error);
+    }
+  }
+
   // Load files list from MSI
   async loadFilesList() {
     const filesData = await this.pyodide.runPythonAsync(`

docs/_static/msi_viewer.js

@@ -6,6 +6,9 @@ Behind the scenes, it is running [pymsi](https://github.com/nightlark/pymsi/) us
 
 <div id="msi-viewer-app">
   <div class="file-selector">
+    <div style="margin-bottom: 1rem;">
+      <button id="load-example-file-button" type="button" class="example-file-btn">Load example file</button>
+    </div>
     <div class="file-input-container">
       <input type="file" id="msi-file-input" accept=".msi" />
       <label for="msi-file-input" class="file-input-label">
@@ -93,11 +96,21 @@ Behind the scenes, it is running [pymsi](https://github.com/nightlark/pymsi/) us
     display: inline-block;
   }
 
+  .file-input-container.dragover .file-input-label {
+    background: #005a9e;
+    color: #e3f2fd;
+    border: 2px solid #90caf9;
+    box-shadow: 0 2px 16px 0 rgba(0, 122, 204, 0.22);
+  }
+
   #msi-file-input {
     position: absolute;
     opacity: 0;
     width: 100%;
     height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 2;
     cursor: pointer;
   }
 
@@ -111,17 +124,21 @@ Behind the scenes, it is running [pymsi](https://github.com/nightlark/pymsi/) us
     border-radius: 6px;
     cursor: pointer;
     font-weight: 500;
-    transition: background-color 0.2s ease;
+    transition: background-color 0.2s, box-shadow 0.2s, border 0.2s, color 0.2s;
     border: 2px solid transparent;
+    box-shadow: none;
+    position: relative;
+    z-index: 1;
   }
 
-  .file-input-label:hover {
-    background: #005a9e;
-  }
-
+  .file-input-label:hover,
+  .file-input-container:hover .file-input-label,
   .file-input-label:focus-within {
-    outline: 2px solid #007acc;
-    outline-offset: 2px;
+    background: #005a9e;
+    color: #e3f2fd;
+    border: 2px solid #90caf9;
+    box-shadow: 0 2px 12px 0 rgba(0, 122, 204, 0.18);
+    outline: none;
   }
 
   #loading-indicator {
@@ -214,7 +231,51 @@ Behind the scenes, it is running [pymsi](https://github.com/nightlark/pymsi/) us
     overflow-y: auto;
     border: 1px solid #ddd;
   }
+
+  .example-file-btn {
+    font-size: 0.95em;
+    padding: 0.3em 0.9em;
+    background: #f5f5f5;
+    color: #007acc;
+    border: 1px solid #b0d4f1;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 0.5rem;
+    transition: background 0.2s, color 0.2s, border 0.2s;
+    vertical-align: middle;
+  }
+  .example-file-btn:hover,
+  .example-file-btn:focus {
+    background: #e3f2fd;
+    color: #005a9e;
+    border-color: #90caf9;
+    outline: none;
+  }
 </style>
+<script>
+// filepath: pymsi/docs/msi_viewer.md (inline script)
+document.addEventListener('DOMContentLoaded', function () {
+  var fileInputContainer = document.querySelector('.file-input-container');
+  if (!fileInputContainer) return;
+
+  // Highlight on drag over
+  fileInputContainer.addEventListener('dragenter', function (e) {
+    e.preventDefault();
+    fileInputContainer.classList.add('dragover');
+  });
+  fileInputContainer.addEventListener('dragover', function (e) {
+    e.preventDefault();
+    fileInputContainer.classList.add('dragover');
+  });
+  fileInputContainer.addEventListener('dragleave', function (e) {
+    if (e.relatedTarget && fileInputContainer.contains(e.relatedTarget)) return;
+    fileInputContainer.classList.remove('dragover');
+  });
+  fileInputContainer.addEventListener('drop', function (e) {
+    fileInputContainer.classList.remove('dragover');
+  });
+});
+</script>
 
 <!-- Include the Pyodide script -->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>