Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-23 04:34:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Slight refactor

Browse Source
This commit is contained in:
Alicia Sykes 2021-04-03 09:29:00 +01:00
parent 6f608b570c
commit 67638b1d4c
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Item.vue
View File

@ -50,9 +50,7 @@ export default {
};
},
methods: {
itemOpened() {
this.$emit('itemClicked');
},
/* Returns true if a string is in URL format. Used to identify tile icon source */
isUrl(str) {
const pattern = new RegExp(/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-/]))?/);
return pattern.test(str);
@ -91,18 +89,25 @@ export default {
}
return imgType;
},
/* Called when an item is opened, so that search field can be reset */
itemOpened() {
this.$emit('itemClicked');
},
/**
* Detects overflowing text, shows ellipse, and allows is to marguee on hover
* The below code is horifically bad, it is embarassing that I wrote it...
*/
manageTitleEllipse() {
const tileElem = document.getElementById(`tile-${this.getId}`);
if (tileElem) {
const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
|| tileElem.scrollWidth > tileElem.clientWidth;
if (isOverflowing) tileElem.className += ' is-overflowing';
} // Note from present me to past me: WTF?!
},
},
mounted() {
// Detects overflowing text, and allows is to marguee on hover
// The below code is horifically bad, it is embarassing that I wrote it...
const tileElem = document.getElementById(`tile-${this.getId}`);
if (tileElem) {
const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
|| tileElem.scrollWidth > tileElem.clientWidth;
if (isOverflowing) {
tileElem.className += ' is-overflowing';
}
} // Note from present me to past me: WTF?!
this.manageTitleEllipse();
},
};
</script>

21
src/views/Home.vue
View File

@ -1,11 +1,14 @@
<template>
<div class="home">
<!-- Page title and navigation buttons -->
<Header :pageInfo="getPageInfo(pageInfo)" />
<!-- Search bar, layout options and settings -->
<FilterTile ref="filterComp"
@user-is-searchin="searching"
@change-display-layout="changeDisplayLayout"
class="filter-container"
/>
<!-- Main content, section for each group of items -->
<div class="item-group-container">
<ItemGroup
v-for="(section, index) in sections"
@ -25,7 +28,7 @@
import Header from '@/components/Header.vue';
import FilterTile from '@/components/FilterTile.vue';
import ItemGroup from '@/components/ItemGroup.vue';
import conf from '../data/conf.yml';
import conf from '../data/conf.yml'; // Main site configuration
export default {
name: 'home',
@ -35,23 +38,23 @@ export default {
ItemGroup,
},
data: () => ({
pageInfo: conf.pageInfo,
sections: conf.sections,
searchTile: '',
pageInfo: conf.pageInfo, // Site meta data (title, description, etc)
sections: conf.sections, // List of sections, containing items
searchValue: '',
}),
methods: {
changeDisplayLayout(layout) {
console.log('Display layout will update', layout);
},
/* Returns true if the user is currently searching */
searching(searchTile) {
this.searchTile = searchTile;
/* Updates local data with search value, triggered from filter comp */
searching(searchValue) {
this.searchValue = searchValue;
},
/* Clears input field, once a searched item is opened */
finishedSearching() {
this.$refs.filterComp.clearFilterInput();
},
/* Extracts the website name from domain, used for the searching functionality */
/* Extracts the site name from domain, used for the searching functionality */
getDomainFromUrl(url) {
const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
const domainPattern = url.match(urlPattern);
@ -63,7 +66,7 @@ export default {
const {
title, description, provider, url,
} = tile;
const searchTerm = this.searchTile.toLowerCase();
const searchTerm = this.searchValue.toLowerCase();
return (title && title.toLowerCase().includes(searchTerm))
|| (provider && provider.toLowerCase().includes(searchTerm))
|| (description && description.toLowerCase().includes(searchTerm))