xevion/calligraphy
1
0
Fork 0
mirror of https://github.com/Xevion/calligraphy.git synced 2025-12-06 01:14:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

add relevancy sorting options

Browse Source
This commit is contained in:
Xevion
2020-08-24 17:06:39 -05:00
parent 1a5784acf3
commit 7816da1d7c
1 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/FontSelector.vue
View File

@@ -9,6 +9,16 @@
<md-input v-model="search"></md-input> <md-input v-model="search"></md-input>
<span class="md-suffix">{{ animatedResults }}</span> <span class="md-suffix">{{ animatedResults }}</span>
</md-field> </md-field>
<md-field>
<label for="sort">Sort by</label>
<md-select v-model="sort" name="sort" id="sort">
<md-option value="alpha">Alphabetically</md-option>
<md-option value="date">Date Updated</md-option>
<md-option value="popularity">Popularity</md-option>
<md-option value="style">Styles</md-option>
<md-option value="trending">Trending</md-option>
</md-select>
</md-field>
</div> </div>
<md-list> <md-list>
<vue-custom-scrollbar :distance="20" <vue-custom-scrollbar :distance="20"
@@ -17,7 +27,7 @@
<md-list-item v-for="font in shown" @click="selectFont(font.index)" :key="font.index"> <md-list-item v-for="font in shown" @click="selectFont(font.index)" :key="font.index">
{{ font.family }} {{ font.family }}
</md-list-item> </md-list-item>
<infinite-loading :identifier="search" force-use-infinite-wrapper=".scroll-area" <infinite-loading :identifier="search + sort" force-use-infinite-wrapper=".scroll-area"
@infinite="infiniteHandler"> @infinite="infiniteHandler">
<div slot="spinner"></div> <div slot="spinner"></div>
<div slot="no-more"></div> <div slot="no-more"></div>
@@ -82,7 +92,7 @@
import axios from 'axios'; import axios from 'axios';
import InfiniteLoading from 'vue-infinite-loading'; import InfiniteLoading from 'vue-infinite-loading';
import vueCustomScrollbar from 'vue-custom-scrollbar' import vueCustomScrollbar from 'vue-custom-scrollbar'
import { gsap } from "gsap"; import {gsap} from "gsap";
axios.baseURL = ''; axios.baseURL = '';
@@ -99,6 +109,7 @@ export default {
search: "", search: "",
selectedFont: null, selectedFont: null,
tweenedResults: 0, tweenedResults: 0,
sort: 'popularity',
}), }),
methods: { methods: {
toggle() { toggle() {
@@ -124,7 +135,7 @@ export default {
}, },
getFonts() { getFonts() {
axios.get( axios.get(
`https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.VUE_APP_FONT_API_KEY}` `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.VUE_APP_FONT_API_KEY}&sort=${this.sort}`
).then((res) => { ).then((res) => {
this.fonts = res.data; this.fonts = res.data;
this.fonts.items.forEach((font, index) => font.index = index) this.fonts.items.forEach((font, index) => font.index = index)
@@ -149,6 +160,10 @@ export default {
} }
}, },
watch: { watch: {
sort: function() {
this.shown = [];
this.getFonts();
},
search: function (newSearch, oldSearch) { search: function (newSearch, oldSearch) {
if (newSearch.length !== oldSearch.length) if (newSearch.length !== oldSearch.length)
if (newSearch.length > oldSearch.length) if (newSearch.length > oldSearch.length)
@@ -161,7 +176,7 @@ export default {
} }
}, },
results: function (newValue) { results: function (newValue) {
gsap.to(this.$data, {duration: 0.35, tweenedResults: newValue.length, ease: "power4"}); gsap.to(this.$data, {duration: 0.4, tweenedResults: newValue.length, ease: "power4"});
} }
} }
} }