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

baseline font infinite loading implementation

Browse Source
This commit is contained in:
Xevion
2020-08-23 13:29:44 -05:00
parent db8dd0cb10
commit abc815dee2
16 changed files with 117 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/css/app.a112045f.css Normal file
View File

@@ -0,0 +1 @@
#font-dialog .md-content>div{margin:0 1em}#font-dialog #spinner-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#font-dialog.md-dialog>.md-dialog-container{min-height:15em}#font-dialog .md-progress-spinner{align-content:center}#font-dialog .md-list{max-height:15em}#font-dialog .scroll-area{position:relative}.md-menu-content{z-index:11!important}body,html{font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}#app,.md-app,.md-list,.page-container,body{height:100%}.hljs{background-color:transparent!important}.md-list-item-content>.md-icon:last-child{margin-left:0!important}

1
docs/css/app.de8e4f7c.css
View File

@@ -1 +0,0 @@
.md-menu-content{z-index:11!important}body,html{font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}#app,.md-app,.md-list,.page-container,body{height:100%}.hljs{background-color:transparent!important}.md-list-item-content>.md-icon:last-child{margin-left:0!important}

2
docs/index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"><link rel=icon href=/calligraphy/favicon.ico><title>calligraphy</title><link href=/calligraphy/js/chunk-2d216214.e238e43d.js rel=prefetch><link href=/calligraphy/js/chunk-2d216257.256ee085.js rel=prefetch><link href=/calligraphy/js/chunk-722a0ca4.615e65cc.js rel=prefetch><link href=/calligraphy/css/app.de8e4f7c.css rel=preload as=style><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=preload as=style><link href=/calligraphy/js/app.18ce6516.js rel=preload as=script><link href=/calligraphy/js/chunk-vendors.582916f7.js rel=preload as=script><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=stylesheet><link href=/calligraphy/css/app.de8e4f7c.css rel=stylesheet></head><body><noscript><strong>We're sorry but calligraphy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/calligraphy/js/chunk-vendors.582916f7.js></script><script src=/calligraphy/js/app.18ce6516.js></script></body></html> <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"><link rel=icon href=/calligraphy/favicon.ico><title>calligraphy</title><link href=/calligraphy/js/chunk-2d216214.e238e43d.js rel=prefetch><link href=/calligraphy/js/chunk-2d216257.256ee085.js rel=prefetch><link href=/calligraphy/js/chunk-442e92d4.62be7804.js rel=prefetch><link href=/calligraphy/css/app.a112045f.css rel=preload as=style><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=preload as=style><link href=/calligraphy/js/app.8309da9b.js rel=preload as=script><link href=/calligraphy/js/chunk-vendors.56893718.js rel=preload as=script><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=stylesheet><link href=/calligraphy/css/app.a112045f.css rel=stylesheet></head><body><noscript><strong>We're sorry but calligraphy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/calligraphy/js/chunk-vendors.56893718.js></script><script src=/calligraphy/js/app.8309da9b.js></script></body></html>

2
docs/js/app.18ce6516.js
View File

File diff suppressed because one or more lines are too long

1
docs/js/app.18ce6516.js.map
View File

File diff suppressed because one or more lines are too long

2
docs/js/app.8309da9b.js Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/js/app.8309da9b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

4
docs/js/chunk-722a0ca4.615e65cc.js → docs/js/chunk-442e92d4.62be7804.js
View File

File diff suppressed because one or more lines are too long

1
docs/js/chunk-442e92d4.62be7804.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/js/chunk-722a0ca4.615e65cc.js.map
View File

File diff suppressed because one or more lines are too long

77
docs/js/chunk-vendors.582916f7.js → docs/js/chunk-vendors.56893718.js
View File

File diff suppressed because one or more lines are too long

2
docs/js/chunk-vendors.582916f7.js.map → docs/js/chunk-vendors.56893718.js.map
View File

File diff suppressed because one or more lines are too long

5
package-lock.json generated
View File

@@ -11775,6 +11775,11 @@
"integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=", "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
"dev": true "dev": true
}, },
"vue-infinite-loading": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
"integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g=="
},
"vue-loader": { "vue-loader": {
"version": "15.9.3", "version": "15.9.3",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1597130733526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz", "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1597130733526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz",

1
package.json
View File

@@ -15,6 +15,7 @@
"vue-axios": "^2.1.5", "vue-axios": "^2.1.5",
"vue-custom-scrollbar": "^1.3.0", "vue-custom-scrollbar": "^1.3.0",
"vue-highlightjs": "^1.3.3", "vue-highlightjs": "^1.3.3",
"vue-infinite-loading": "^2.4.5",
"vue-material-design-icons": "^4.9.0" "vue-material-design-icons": "^4.9.0"
}, },
"devDependencies": { "devDependencies": {

59
src/components/FontSelector.vue
View File

@@ -7,18 +7,25 @@
<md-field> <md-field>
<label>Font Family</label> <label>Font Family</label>
<md-input v-model="search"></md-input> <md-input v-model="search"></md-input>
<span class="md-suffix">{{ results.length }}</span> <span class="md-suffix">{{ results.length }} ({{ shown.length }})</span>
</md-field> </md-field>
</div> </div>
<md-list> <md-list>
<vue-custom-scrollbar :settings="{suppressScrollX: true, suppressScrollY: false}" class="scroll-area"> <vue-custom-scrollbar :distance="20"
<md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family"> :settings="{suppressScrollX: true, suppressScrollY: false}"
class="scroll-area">
<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="infiniteHandler">
<div slot="spinner"></div>
<div slot="no-more"></div>
<div slot="no-results"></div>
</infinite-loading>
</vue-custom-scrollbar> </vue-custom-scrollbar>
</md-list> </md-list>
</md-content> </md-content>
<md-dialog-actions> <md-dialog-actions>
<md-button class="md-primary" @click="toggle">Close</md-button> <md-button class="md-primary" @click="toggle">Close</md-button>
<md-button class="md-primary" @click="toggle">Save</md-button> <md-button class="md-primary" @click="toggle">Save</md-button>
@@ -55,7 +62,6 @@
.md-list { .md-list {
max-height: 15em; max-height: 15em;
//overflow: auto;
} }
.scroll-area { .scroll-area {
@@ -70,6 +76,7 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import InfiniteLoading from 'vue-infinite-loading';
import vueCustomScrollbar from 'vue-custom-scrollbar' import vueCustomScrollbar from 'vue-custom-scrollbar'
axios.baseURL = ''; axios.baseURL = '';
@@ -77,11 +84,13 @@ axios.baseURL = '';
export default { export default {
name: "FontSelector", name: "FontSelector",
components: { components: {
vueCustomScrollbar vueCustomScrollbar,
InfiniteLoading,
}, },
data: () => ({ data: () => ({
fonts: null, fonts: null,
visible: false, visible: false,
shown: [],
search: "", search: "",
selectedFont: null selectedFont: null
}), }),
@@ -92,6 +101,21 @@ export default {
if (this.visible && this.fonts === null) if (this.visible && this.fonts === null)
this.getFonts(); this.getFonts();
}, },
infiniteHandler($state) {
// Calculate the number of items left to load
let left = this.results.length - this.shown.length;
if (left > 0) {
// Add up to 5 new fonts to the 'shown' list
let slice = this.results.slice(this.shown.length, this.shown.length + Math.min(left, 5) + 1)
this.shown = this.shown.concat(slice)
// Mark as completed if the final n items were loaded.
left <= 5 ? $state.complete() : $state.loaded()
} else {
// No items left, mark as completed.
$state.complete()
}
},
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}`
@@ -102,11 +126,30 @@ export default {
}, },
selectFont(fontIndex) { selectFont(fontIndex) {
this.selectedFont = this.fonts.items[fontIndex]; this.selectedFont = this.fonts.items[fontIndex];
} },
}, },
computed: { computed: {
results() { results() {
return this.fonts !== null ? this.fonts.items.filter(font => font.family.includes(this.search)) : []; if (this.fonts !== null)
if (this.search.length > 0)
return this.fonts.items.filter(font => font.family.includes(this.search));
else
return this.fonts.items
else
return []
}
},
watch: {
search: function (newSearch, oldSearch) {
if (newSearch.length !== oldSearch.length)
if (newSearch.length > oldSearch.length)
// More precise results needed. Simply re-apply filter.
this.shown = this.shown.filter(font => font.family.includes(this.search));
else if (newSearch.length < oldSearch.length) {
// Broader results are possible, rebuild results instead.
let min = this.shown.length;
this.shown = this.results.slice(0, Math.min(min, 5) + 1);
}
} }
} }
} }

7
src/main.js
View File

@@ -8,10 +8,17 @@ import json from 'highlight.js/lib/languages/css';
import 'vue-material/dist/vue-material.min.css' import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css' import 'vue-material/dist/theme/default.css'
import 'highlight.js/styles/default.css'; import 'highlight.js/styles/default.css';
import InfiniteLoading from "vue-infinite-loading";
Vue.use(VueHighlightJS, {languages: {json}}) Vue.use(VueHighlightJS, {languages: {json}})
Vue.use(VueMaterial) Vue.use(VueMaterial)
Vue.use(VueAxios, axios) Vue.use(VueAxios, axios)
Vue.use(InfiniteLoading, {
system: {
// throttleLimit: 500,
/* other settings need to configure */
},
});
Vue.config.productionTip = false Vue.config.productionTip = false