Turn extract click listener back on.

Add shadow to tabs when there are more tabs that aren't displayed

src/web/InputWaiter.mjs

@@ -255,7 +255,7 @@ class InputWaiter {
                 this.removeLoaderWorker(this.getLoaderWorker(r.data));
                 break;
             case "refreshTabs":
-                this.refreshTabs(r.data.nums, r.data.activeTab);
+                this.refreshTabs(r.data.nums, r.data.activeTab, r.data.tabsLeft, r.data.tabsRight);
                 break;
             case "changeTab":
                 this.changeTab(r.data, this.app.options.syncTabs);
@@ -965,8 +965,10 @@ class InputWaiter {
      *
      * @param {number[]} nums - The inputNums of the tab bar to be drawn
      * @param {number} activeTab - The inputNum of the active tab
+     * @param {boolean} tabsLeft - True if there are tabs to the left of the currently displayed tabs
+     * @param {boolean} tabsRight - True if there are tabs to the right of the currently displayed tabs
      */
-    refreshTabs(nums, activeTab) {
+    refreshTabs(nums, activeTab, tabsLeft, tabsRight) {
         const tabsList = document.getElementById("input-tabs");
 
         for (let i = tabsList.children.length - 1; i >= 0; i--) {
@@ -979,6 +981,24 @@ class InputWaiter {
             tabsList.appendChild(this.createTabElement(nums[i], active));
         }
 
+        const firstTabElement = document.getElementById("input-tabs").firstElementChild;
+        const lastTabElement = document.getElementById("input-tabs").lastElementChild;
+
+        if (firstTabElement) {
+            if (tabsLeft) {
+                firstTabElement.style.boxShadow = "15px 0px 15px -15px var(--primary-border-colour) inset";
+            } else {
+                firstTabElement.style.boxShadow = "";
+            }
+        }
+        if (lastTabElement) {
+            if (tabsRight) {
+                lastTabElement.style.boxShadow = "-15px 0px 15px -15px var(--primary-border-colour) inset";
+            } else {
+                lastTabElement.style.boxShadow = "";
+            }
+        }
+
         if (nums.length > 1) {
             tabsList.parentElement.style.display = "block";
 

src/web/InputWorker.mjs

@@ -467,11 +467,15 @@ self.setInput = function(inputData) {
  */
 self.refreshTabs = function(inputNum, direction) {
     const nums = self.getNearbyNums(inputNum, direction);
+    const tabsLeft = (self.getSmallestInputNum() !== nums[0]);
+    const tabsRight = (self.getLargestInputNum() !== nums[nums.length - 1]);
     self.postMessage({
         action: "refreshTabs",
         data: {
             nums: nums,
-            activeTab: (nums.includes(inputNum)) ? inputNum : self.getNextInputNum(inputNum)
+            activeTab: (nums.includes(inputNum)) ? inputNum : self.getNextInputNum(inputNum),
+            tabsLeft: tabsLeft,
+            tabsRight: tabsRight
         }
     });
 

src/web/Manager.mjs

@@ -196,7 +196,7 @@ class Manager {
         this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
         this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output);
         document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
-        // this.addDynamicListener(".extract-file,.extract-file i", "click", this.output.extractFileClick, this.output);
+        this.addDynamicListener(".extract-file,.extract-file i", "click", this.output.extractFileClick, this.output);
         this.addDynamicListener("#output-tabs-wrapper #output-tabs li .output-tab-content", "click", this.output.changeTabClick, this.output);
         document.getElementById("btn-previous-output-tab").addEventListener("click", this.output.changeTabLeft.bind(this.output));
         document.getElementById("btn-next-output-tab").addEventListener("click", this.output.changeTabRight.bind(this.output));