fix vue using dom event listeners

Faithful-Resource-Pack · Apr 29, 2024 · b0b777f · b0b777f
1 parent 4d93666
commit b0b777f
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 117 deletions.
diff --git a/index.html b/index.html
@@ -154,35 +154,37 @@ <h3>{{ post.title }}</h3>
 </div>
 
 <script>
-  const v = new Vue({
-    el: "#app",
-    data() {
-      return {
-        addons: [],
-        NB_ITEMS: 3,
-        LOADING_ID: "loading",
+  document.addEventListener("DOMContentLoaded", () => {
+    const v = new Vue({
+      el: "#app",
+      data() {
+        return {
+          addons: [],
+          NB_ITEMS: 3,
+          LOADING_ID: "loading",
 
-      };
-    },
-    created() {
-      fetch('https://api.faithfulpack.net/v2/addons/approved')
-        .then((res) => res.json())
-        .then((val) => {
-          const res = []
+        };
+      },
+      created() {
+        fetch('https://api.faithfulpack.net/v2/addons/approved')
+          .then((res) => res.json())
+          .then((val) => {
+            const res = []
 
-          let items = val
-          for (let i = 0; i < this.NB_ITEMS; i++) {
-            // splice removes element from list and returns the retrieved elements
-            // removes duplicate suggested add-ons
-            const element = items.splice((Math.random() * items.length) | 0, 1)[0]
-            res.push(element)
-          }
-          this.addons = res
-        })
-        .catch((err) => {
-          console.error(err)
-          this.addons = []
-        });
-    }
-  });
+            let items = val
+            for (let i = 0; i < this.NB_ITEMS; i++) {
+              // splice removes element from list and returns the retrieved elements
+              // removes duplicate suggested add-ons
+              const element = items.splice((Math.random() * items.length) | 0, 1)[0]
+              res.push(element)
+            }
+            this.addons = res
+          })
+          .catch((err) => {
+            console.error(err)
+            this.addons = []
+          });
+      }
+    });
+  })
 </script>
diff --git a/secret-tools/modlistgenerator.html b/secret-tools/modlistgenerator.html
@@ -24,110 +24,112 @@ <h2>modlist.html generator</h2>
   </div>
 </div>
 <script>
-  const v = new Vue({
-    el: '#modlistGenerator',
-    data () {
-      return {
-        firstFile : undefined,
-        progress: 0,
-        totalMods: 0
-      };
-    },
-    watch: {
-      manifestInput(v1, v2) {
-        console.info(this, v1, v2)
-      }
-    },
-    computed: {
-      canGenerateModlist() {
-        return this.firstFile !== undefined
-      },
-      isGenerating() {
-        return this.progress != 0
+  document.addEventListener("DOMContentLoaded", () => {
+    const v = new Vue({
+      el: '#modlistGenerator',
+      data () {
+        return {
+          firstFile : undefined,
+          progress: 0,
+          totalMods: 0
+        };
       },
-      generatedPercent() {
-        if (this.totalMods <= 0)
-          return ''
-
-        return (this.progress / this.totalMods * 100).toFixed(2)
+      watch: {
+        manifestInput(v1, v2) {
+          console.info(this, v1, v2)
+        }
       },
-      genPer() {
-        return this.generatedPercent + '%'
-      }
-    },
-    methods: {
-      changeFirstFile (event) {
-        if (!event.target || !event.target.files || !event.target.files.length)
-          return
-
-        this.firstFile = event.target.files[0];
-
-        console.log(this)
+      computed: {
+        canGenerateModlist() {
+          return this.firstFile !== undefined
+        },
+        isGenerating() {
+          return this.progress != 0
+        },
+        generatedPercent() {
+          if (this.totalMods <= 0)
+            return ''
+
+          return (this.progress / this.totalMods * 100).toFixed(2)
+        },
+        genPer() {
+          return this.generatedPercent + '%'
+        }
       },
-      async generateModlist() {
-        if (!this.firstFile)
-          return
-
-        this.progress = 0
-
-        let manifest
+      methods: {
+        changeFirstFile (event) {
+          if (!event.target || !event.target.files || !event.target.files.length)
+            return
 
-        try {
-          // load file
-          manifest = JSON.parse(await this.firstFile.text())
+          this.firstFile = event.target.files[0];
 
-          //verify structure
-          if (!manifest.files || !Array.isArray(manifest.files))
+          console.log(this)
+        },
+        async generateModlist() {
+          if (!this.firstFile)
             return
 
-          this.totalMods = manifest.files.length
           this.progress = 0
 
-          // for each "file"
-          let file, pid, displayName, url, res, author
-          let finalHTML = '<ul>\n'
-          for (let i = 0; i < manifest.files.length; ++i) {
-            this.progress = this.progress + 1
-
-            // reset to default values
-            file = undefined
-            pid = undefined
-            displayName = ''
+          let manifest
 
-            // get file entry in array
-            file = manifest.files[i]
-
-            // its project id
-            pid = file.projectID
-            if (isNaN(pid))
-              return
+          try {
+            // load file
+            manifest = JSON.parse(await this.firstFile.text())
 
-            // get curseforge API
-            url = `https://api.allorigins.win/raw?url=${encodeURIComponent(`https://addons-ecs.forgesvc.net/api/v2/addon/${pid}`)}`
-            res = await axios.get(url)
-            if (!res || !res.data)
+            //verify structure
+            if (!manifest.files || !Array.isArray(manifest.files))
               return
 
-            // get data
-            displayName = res.data.name
-            author = res.data.authors[0].name
-
-            // append to html
-            finalHTML += '<li><a href="https://minecraft.curseforge.com/mc-mods/' + pid + '">' + displayName + ' (by ' + author + ')</a></li>\n'
+            this.totalMods = manifest.files.length
+            this.progress = 0
+
+            // for each "file"
+            let file, pid, displayName, url, res, author
+            let finalHTML = '<ul>\n'
+            for (let i = 0; i < manifest.files.length; ++i) {
+              this.progress = this.progress + 1
+
+              // reset to default values
+              file = undefined
+              pid = undefined
+              displayName = ''
+
+              // get file entry in array
+              file = manifest.files[i]
+
+              // its project id
+              pid = file.projectID
+              if (isNaN(pid))
+                return
+
+              // get curseforge API
+              url = `https://api.allorigins.win/raw?url=${encodeURIComponent(`https://addons-ecs.forgesvc.net/api/v2/addon/${pid}`)}`
+              res = await axios.get(url)
+              if (!res || !res.data)
+                return
+
+              // get data
+              displayName = res.data.name
+              author = res.data.authors[0].name
+
+              // append to html
+              finalHTML += '<li><a href="https://minecraft.curseforge.com/mc-mods/' + pid + '">' + displayName + ' (by ' + author + ')</a></li>\n'
+            }
+
+            // close html
+            finalHTML += '</ul>\n'
+
+            const blob = new Blob([finalHTML], {type: "text/html;charset=utf-8"});
+            saveAs(blob, "modlist.html");
+          } catch(e) {
+            console.error(e)
+            return
           }
-
-          // close html
-          finalHTML += '</ul>\n'
-
-          const blob = new Blob([finalHTML], {type: "text/html;charset=utf-8"});
-          saveAs(blob, "modlist.html");
-        } catch(e) {
-          console.error(e)
-          return
         }
       }
-    }
-  })
+    })
+  });
 </script>
 <script defer src="/js/mods/axios.min.js"></script>
 <script defer src="/js/mods/FileSaver.min.js"></script>