tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-31 01:24:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

move escapeString function(s) to separate file for reuse

Browse Source
This commit is contained in:
joshuaboud 2022-05-25 16:40:42 -03:00
parent d592994fc8
commit 8bd30b1d1f
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
2 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
navigator-vue/src/components/DirectoryEntry.vue
View File

@ -20,7 +20,7 @@
<ChevronDownIcon v-if="!showEntries" class="size-icon icon-default" /> <ChevronDownIcon v-if="!showEntries" class="size-icon icon-default" />
<ChevronUpIcon v-else class="size-icon icon-default" /> <ChevronUpIcon v-else class="size-icon icon-default" />
</button> </button>
<div v-html="escapeName(entry.name)"></div> <div v-html="escapeStringHTML(entry.name)" :title="entry.name"></div>
<div v-if="entry.type === 'symbolic link'" class="inline-flex gap-1 items-center"> <div v-if="entry.type === 'symbolic link'" class="inline-flex gap-1 items-center">
<div class="inline relative"> <div class="inline relative">
<ArrowNarrowRightIcon class="text-default size-icon-sm inline" /> <ArrowNarrowRightIcon class="text-default size-icon-sm inline" />
@ -29,7 +29,7 @@
class="icon-danger size-icon-sm absolute inset-x-0 bottom-0" class="icon-danger size-icon-sm absolute inset-x-0 bottom-0"
/> />
</div> </div>
<div v-html="escapeName(entry.target?.rawPath ?? '')"></div> <div v-html="escapeStringHTML(entry.target?.rawPath ?? '')" :title="entry.target.rawPath"></div>
</div> </div>
</div> </div>
</td> </td>
@ -103,6 +103,7 @@ import { ref, inject, watch, nextTick } from 'vue';
import { DocumentIcon, FolderIcon, LinkIcon, DocumentRemoveIcon, ArrowNarrowRightIcon, XIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/solid'; import { DocumentIcon, FolderIcon, LinkIcon, DocumentRemoveIcon, ArrowNarrowRightIcon, XIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/solid';
import { settingsInjectionKey } from '../keys'; import { settingsInjectionKey } from '../keys';
import DirectoryEntryList from './DirectoryEntryList.vue'; import DirectoryEntryList from './DirectoryEntryList.vue';
import { escapeStringHTML } from '../functions/escapeStringHTML';
export default { export default {
name: 'DirectoryEntry', name: 'DirectoryEntry',
@ -157,8 +158,6 @@ export default {
directoryViewRef.value?.selection.deselectAllForward(); directoryViewRef.value?.selection.deselectAllForward();
} }
const escapeName = (string) => string.replace(/[^ -~]/gi, c => `<span class="text-orange-500">${JSON.stringify(c).replace(/^['"]|['"]$/g, '')}</span>`)
watch(props.entry, () => { watch(props.entry, () => {
if (props.entry.type === 'directory' || (props.entry.type === 'symbolic link' && props.entry.target?.type === 'directory')) { if (props.entry.type === 'directory' || (props.entry.type === 'symbolic link' && props.entry.target?.type === 'directory')) {
icon.value = FolderIcon; icon.value = FolderIcon;
@ -189,7 +188,7 @@ export default {
getSelected, getSelected,
selectAll, selectAll,
deselectAllForward, deselectAllForward,
escapeName, escapeStringHTML,
DirectoryEntryList, DirectoryEntryList,
nextTick, nextTick,
} }

26
navigator-vue/src/functions/escapeStringHTML.js Normal file
View File

@ -0,0 +1,26 @@
/**
* Replaces all non-printable characters with an orange span containing the escaped representation of the character
*
* @param {String} string - String to escape
* @returns {String}
*/
const escapeStringHTML = (string) => replaceNonPrinting(string, c => wrapSpan(escapeCallback(c)));
/**
* Replaces all non-printable characters with the escaped representation of the character
*
* @param {String} string - String to escape
* @returns {String}
*/
const escapeString = (string) => replaceNonPrinting(string, escapeCallback);
const replaceNonPrinting = (string, callback) => string.replace(/[^ -~]/gi, callback);
const escapeCallback = c => JSON.stringify(c).replace(/^['"]|['"]$/g, '')
const wrapSpan = c => `<span class="text-orange-500">${c}</span>`
export {
escapeString,
escapeStringHTML,
};