@abi-software/map-side-bar 2.4.0-alpha-1 → 2.4.0-isan-0

package/src/mixins/mixedPageCalculation.vue

@@ -1,78 +1,102 @@
-<script>
-const RatioOfPMRResults = 0.2; // Ratio of PMR results to Sparc results
-
-// The functions below are needed because the number of results shown on the page is dependent what is available from each index.
-// We fix this by calcuting how many results we have shown before the requested page and then calculating the offset based on that.
-
-export default {
-  methods: {
-    
-    // Calculate Variable Ratio is used as a number to determine how the ratio of PMR results to SPARC results
-    //   will be shown on the page. 1 means only PMR results, 0 means only SPARC results. 
-    calculateVariableRatio: function () {
-      if (this.page === 1) {
-        this.variableRatio = RatioOfPMRResults
-      } else if( this.npp_SPARC * (this.page -1) >= this.sparcNumberOfHits) {
-        this.variableRatio = 1
-        // calculate offset
-        let mixedOffest = this.page*RatioOfPMRResults
-      } else if(this.npp_PMR * (this.page - 1) >= this.pmrNumberOfHits) {
-        this.variableRatio = 0
-      } else {
-        this.variableRatio = RatioOfPMRResults
-      }
-    },
-    calculatePMROffest: function() {
-      if (this.variableRatio === RatioOfPMRResults) {
-        return (this.page-1)*this.npp_PMR
-      } else if (this.variableRatio === 1) {
-
-        // calculate how many results we showed before the requested page
-        let pageWhereSPARCResultsRanOut = Math.ceil(this.sparcNumberOfHits / this.npp_SPARC)
-        let numberOfPMRResultsShownInMixed = this.npp_PMR * pageWhereSPARCResultsRanOut
-        let numberOfPMRResultsShownInPMROnly = (this.page - 1 - pageWhereSPARCResultsRanOut) * this.numberPerPage
-        return numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly
-      }
-    },
-    calculateSPARCOffest: function() {
-      if(this.variableRatio === RatioOfPMRResults) {
-        return (this.page-1)*this.npp_SPARC
-      } else if (this.variableRatio === 0) {
-        
-        // calculate how many results we showed before the requested page
-        let pageWherePMRResultsRanOut = Math.ceil(this.pmrNumberOfHits / this.npp_PMR)
-        let numberOfSPARCResultsShownInMixed = this.npp_SPARC * pageWherePMRResultsRanOut
-        let numberOfSPARCResultsShownInSPARCOnly = (this.page - 1 - pageWherePMRResultsRanOut) * this.numberPerPage
-        let offset = numberOfSPARCResultsShownInMixed + numberOfSPARCResultsShownInSPARCOnly
-        return offset
-      }
-    },
-    PMRLimit: function(pmrResultsOnlyFlag=false) {
-      if (pmrResultsOnlyFlag) {
-        return this.numberPerPage
-      }
-      if (this.variableRatio === RatioOfPMRResults) {
-        return this.npp_PMR
-      } else if (this.variableRatio === 1) {
-        return this.numberPerPage
-      } else if (this.variableRatio === 0) {
-        return 0
-      }
-    },
-    SPARCLimit: function(pmrResultsOnlyFlag=false) {
-      if(pmrResultsOnlyFlag) {
-        return 0
-      }
-      if (this.variableRatio === RatioOfPMRResults) {
-        return this.npp_SPARC
-      } else if (this.variableRatio === 0) {
-        return this.numberPerPage
-      } else if (this.variableRatio === 1) {
-        return 0
-      }
-    },
-  }
-};
-</script>
-
-
+<script>
+// The functions below are needed because the number of results shown on the page is dependent what is available from each index.
+// We fix this by calcuting how many results we have shown before the requested page and then calculating the offset based on that.
+
+// Note that this.RatioOfPMRResults is a number that determines how many PMR results are shown compared to SPARC results. It is grabbed from a constant in 
+//  SidebarContent.vue.
+
+export default {
+  methods: {
+    
+    // Calculate Variable Ratio is used as a number to determine how the ratio of PMR results to SPARC results
+    //   will be shown on the page. 1 means only PMR results, 0 means only SPARC results. 
+    calculateVariableRatio: function () {
+      if (this.page === 1) {
+        this.variableRatio = this.RatioOfPMRResults
+
+      // Check if we have run out of Sparc results
+      } else if( this.npp_SPARC * (this.page -1) >= this.sparcNumberOfHits) {
+        this.variableRatio = 1
+      
+      // Check if we have run out of PMR results
+      } else if(this.npp_PMR * (this.page - 1) >= this.pmrNumberOfHits) {
+        this.variableRatio = 0
+      } else {
+
+        // Set the ratio to the same as the previous page if both indeces have results
+        this.variableRatio = this.RatioOfPMRResults
+      }
+    },
+
+    // calculatePMROffest is used to calculate how many PMR results we have shown before the requested page
+    calculatePMROffest: function() {
+
+      // If variable ratio has not changed, we have not run out of results.
+      //   we can use the the number per page PMR to calculate the offset
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return (this.page-1)*this.npp_PMR
+
+      // If we have run out of SPARC results, we need to calculate how many PMR results we have shown before the requested page
+      } else if (this.variableRatio === 1) {
+
+        // calculate how many results we showed before the requested page
+        // We want our offset to be the number of PMR results shown before the requested page
+        //  This can be though of as numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly = offset
+        let pageWhereSPARCResultsRanOut = Math.ceil(this.sparcNumberOfHits / this.npp_SPARC)
+        let numberOfPMRResultsShownInMixed = this.npp_PMR * pageWhereSPARCResultsRanOut
+        let numberOfPMRResultsShownInPMROnly = (this.page - 1 - pageWhereSPARCResultsRanOut) * this.numberPerPage
+        return numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly
+      }
+    },
+    
+    // calculateSPARCOffest is used to calculate how many SPARC results we have shown before the requested page. See above for details
+    calculateSPARCOffest: function() {
+      if(this.variableRatio === this.RatioOfPMRResults) {
+        return (this.page-1)*this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        
+        // calculate how many results we showed before the requested page
+        let pageWherePMRResultsRanOut = Math.ceil(this.pmrNumberOfHits / this.npp_PMR)
+        let numberOfSPARCResultsShownInMixed = this.npp_SPARC * pageWherePMRResultsRanOut
+        let numberOfSPARCResultsShownInSPARCOnly = (this.page - 1 - pageWherePMRResultsRanOut) * this.numberPerPage
+        let offset = numberOfSPARCResultsShownInMixed + numberOfSPARCResultsShownInSPARCOnly
+        return offset
+      }
+    },
+
+    // PMRLimit is used to calculate how many PMR results we can show on the page.
+    PMRLimit: function(pmrResultsOnlyFlag=false) {
+      // If we only want PMR results, return the number per page  
+      if (pmrResultsOnlyFlag) {
+        return this.numberPerPage
+      }
+      // If the variable ratio is the same as the ratio of PMR results, return the number per page set for PMR
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return this.npp_PMR
+
+      // if we have run out of sparc results, we want to show pmr results equal to the total number of results per page
+      } else if (this.variableRatio === 1) {
+        return this.numberPerPage
+
+      // if we have run out of pmr results, we want to show 0 pmr results
+      } else if (this.variableRatio === 0) {
+        return 0
+      }
+    },
+    SPARCLimit: function(pmrResultsOnlyFlag=false) {
+      if(pmrResultsOnlyFlag) {
+        return 0
+      }
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        return this.numberPerPage
+      } else if (this.variableRatio === 1) {
+        return 0
+      }
+    },
+  }
+};
+</script>
+
+

package/static.json

@@ -1,7 +1,7 @@
-{
-    "root": "dist",
-    "clean_urls": true,
-    "routes": {
-      "/**": "index.html"
-    }
+{
+    "root": "dist",
+    "clean_urls": true,
+    "routes": {
+      "/**": "index.html"
+    }
   }

package/vite.config.js

@@ -1,56 +1,56 @@
-import { resolve } from "node:path"
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-    server: {
-        port: 8081,
-    },
-    plugins: [
-        vue(),
-        Components({
-            // allow auto load markdown components under `./src/components/`
-            extensions: ['vue', 'md'],
-            // allow auto import and register components used in markdown
-            include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-            resolvers: [
-                ElementPlusResolver({
-                    importStyle: 'sass',
-                }),
-            ],
-            dts: './src/components.d.ts',
-        }),
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, './src'),
-        }
-    },
-    build: {
-        lib: {
-            entry: resolve(__dirname, "./src/components/index.js"),
-            name: "MapSideBar",
-            fileName: 'map-side-bar',
-        },
-        rollupOptions: {
-            external: ["vue"],
-            output: {
-                globals: {
-                    vue: "Vue",
-                },
-            },
-        },
-    },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                additionalData: `@use './src/assets/styles' as *;`
-            }
-        }
-    }
+import { resolve } from "node:path"
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    server: {
+        port: 8081,
+    },
+    plugins: [
+        vue(),
+        Components({
+            // allow auto load markdown components under `./src/components/`
+            extensions: ['vue', 'md'],
+            // allow auto import and register components used in markdown
+            include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+            resolvers: [
+                ElementPlusResolver({
+                    importStyle: 'sass',
+                }),
+            ],
+            dts: './src/components.d.ts',
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, './src'),
+        }
+    },
+    build: {
+        lib: {
+            entry: resolve(__dirname, "./src/components/index.js"),
+            name: "MapSideBar",
+            fileName: 'map-side-bar',
+        },
+        rollupOptions: {
+            external: ["vue"],
+            output: {
+                globals: {
+                    vue: "Vue",
+                },
+            },
+        },
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                additionalData: `@use './src/assets/styles' as *;`
+            }
+        }
+    }
 })

package/vuese-generator.js

@@ -1,65 +1,65 @@
-/**
- * Vuese Generator
- *
- * To generate markdown files from Vue components
- * To watch components changes for Vitepress on Dev Mode
- */
-
-import fs from 'fs'
-import path from 'path'
-import chokidar from 'chokidar'
-import { parser } from '@vuese/parser'
-import { Render } from '@vuese/markdown-render'
-
-const watchMode = process.argv.find((argv) => argv === 'watch')
-
-const componentsDir = 'src/components'
-const components = ['SideBar.vue']
-const outputDir = 'docs/components'
-
-function generateMarkdown(file) {
-  const fileWithPath = `${componentsDir}/${file}`
-  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
-
-  try {
-    const parserResult = parser(fileContent)
-    const r = new Render(parserResult)
-    const renderResult = r.render()
-    const markdownResult = r.renderMarkdown()
-    const markdownContent = markdownResult.content
-    const componentName = path.basename(fileWithPath, '.vue')
-
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir)
-    }
-
-    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
-      if (err) {
-        console.error(`Error writing markdown file for ${componentName}`, err)
-      } else {
-        console.log(`Markdown file for ${componentName} is generated!`)
-      }
-    })
-  } catch(e) {
-    console.error(e)
-  }
-}
-
-// To generate markdown files - one time
-components.forEach((component) => {
-  console.log(`Write markdown file for ${component} on first load.`)
-  generateMarkdown(component)
-})
-
-// To watch component changes and generate markdown files
-if (watchMode) {
-  const watcher = chokidar.watch(components, {
-    cwd: componentsDir,
-    ignoreInitial: true,
-  })
-
-  watcher.on('change', (file) => {
-    console.log(`The component ${file} has changed!`)
-    generateMarkdown(file)
-  })
-}
+/**
+ * Vuese Generator
+ *
+ * To generate markdown files from Vue components
+ * To watch components changes for Vitepress on Dev Mode
+ */
+
+import fs from 'fs'
+import path from 'path'
+import chokidar from 'chokidar'
+import { parser } from '@vuese/parser'
+import { Render } from '@vuese/markdown-render'
+
+const watchMode = process.argv.find((argv) => argv === 'watch')
+
+const componentsDir = 'src/components'
+const components = ['SideBar.vue']
+const outputDir = 'docs/components'
+
+function generateMarkdown(file) {
+  const fileWithPath = `${componentsDir}/${file}`
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+
+  try {
+    const parserResult = parser(fileContent)
+    const r = new Render(parserResult)
+    const renderResult = r.render()
+    const markdownResult = r.renderMarkdown()
+    const markdownContent = markdownResult.content
+    const componentName = path.basename(fileWithPath, '.vue')
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
+      if (err) {
+        console.error(`Error writing markdown file for ${componentName}`, err)
+      } else {
+        console.log(`Markdown file for ${componentName} is generated!`)
+      }
+    })
+  } catch(e) {
+    console.error(e)
+  }
+}
+
+// To generate markdown files - one time
+components.forEach((component) => {
+  console.log(`Write markdown file for ${component} on first load.`)
+  generateMarkdown(component)
+})
+
+// To watch component changes and generate markdown files
+if (watchMode) {
+  const watcher = chokidar.watch(components, {
+    cwd: componentsDir,
+    ignoreInitial: true,
+  })
+
+  watcher.on('change', (file) => {
+    console.log(`The component ${file} has changed!`)
+    generateMarkdown(file)
+  })
+}