diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index ee4da0dc..1e2da135 100644 --- a/src/components/LinkItems/Section.vue +++ b/src/components/LinkItems/Section.vue @@ -17,9 +17,9 @@ :style="gridStyle" > a.charCodeAt(0)).reduce((x, y) => x + y); - const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase(); - return `${index}_${charSum}_${itemTitleStr}`; - }, /* Opens the iframe modal */ triggerModal(url) { this.$refs[`iframeModal-${this.groupId}`].show(url); @@ -145,14 +139,14 @@ export default { /* Sorts items by most used to least used, based on click-count */ sortByMostUsed(items) { const usageCount = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}'); - const gmu = (item) => usageCount[this.makeId(this.title, item.title)] || 0; + const gmu = (item) => usageCount[item.id] || 0; items.reverse().sort((a, b) => (gmu(a) < gmu(b) ? 1 : -1)); return items; }, /* Sorts items by most recently used */ sortBLastUsed(items) { const usageCount = JSON.parse(localStorage.getItem(localStorageKeys.LAST_USED) || '{}'); - const glu = (item) => usageCount[this.makeId(this.title, item.title)] || 0; + const glu = (item) => usageCount[item.id] || 0; items.reverse().sort((a, b) => (glu(a) < glu(b) ? 1 : -1)); return items; }, diff --git a/src/utils/ConfigAccumalator.js b/src/utils/ConfigAccumalator.js index ca6bc075..041306e9 100644 --- a/src/utils/ConfigAccumalator.js +++ b/src/utils/ConfigAccumalator.js @@ -13,6 +13,7 @@ import { layout as defaultLayout, } from '@/utils/defaults'; import ErrorHandler from '@/utils/ErrorHandler'; +import { applyItemId } from '@/utils/MiscHelpers'; import conf from '../../public/conf.yml'; export default class ConfigAccumulator { @@ -57,18 +58,24 @@ export default class ConfigAccumulator { /* Sections */ sections() { + let sections = []; // If the user has stored sections in local storage, return those const localSections = localStorage[localStorageKeys.CONF_SECTIONS]; if (localSections) { try { const json = JSON.parse(localSections); - if (json.length >= 1) return json; + if (json.length >= 1) sections = json; } catch (e) { ErrorHandler('Malformed section data in local storage'); } } - // If the function hasn't yet returned, then return the config file sections - return this.conf ? this.conf.sections || [] : []; + // If sections were not set from local data, then use config file instead + if (sections.length === 0) { + sections = this.conf ? this.conf.sections || [] : []; + } + // Apply a unique ID to each item + sections = applyItemId(sections); + return sections; } /* Complete config */ diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js index d5233e54..ac98566f 100644 --- a/src/utils/MiscHelpers.js +++ b/src/utils/MiscHelpers.js @@ -25,3 +25,23 @@ export const sanitize = (string) => { const reg = /[&<>"'/]/ig; return string.replace(reg, (match) => (map[match])); }; + +/* Based on section title, item name and index, return a string value for ID */ +const makeItemId = (sectionStr, itemStr, index) => { + const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y); + const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase(); + return `${index}_${charSum}_${itemTitleStr}`; +}; + +/* Given an array of sections, apply a unique ID to each item, and return modified array */ +export const applyItemId = (inputSections) => { + const sections = inputSections || []; + sections.forEach((sec, secIdx) => { + if (sec.items) { + sec.items.forEach((item, itemIdx) => { + sections[secIdx].items[itemIdx].id = makeItemId(sec.name, item.title, itemIdx); + }); + } + }); + return sections; +};