xevion/calligraphy
1
0
Fork 0
mirror of https://github.com/Xevion/calligraphy.git synced 2026-01-31 04:23:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

new FontItem component for displaying and loading WebFonts (WebFontLoader implementation)

Browse Source
This commit is contained in:
Xevion
2020-08-30 18:06:09 -05:00
parent 7816da1d7c
commit 4a67ca7b9a
18 changed files with 47 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/css/app.a112045f.css
-1
View File
@@ -1 +0,0 @@
#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}
docs/css/chunk-vendors.f0c5b23d.css
-5
View File
File diff suppressed because one or more lines are too long
docs/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

docs/index.html
-1
View File
@@ -1 +0,0 @@
<!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>
docs/js/app.8309da9b.js
-2
View File
File diff suppressed because one or more lines are too long
docs/js/app.8309da9b.js.map
-1
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-2d216214.e238e43d.js
-4
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-2d216214.e238e43d.js.map
-1
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-2d216257.256ee085.js
-22
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-2d216257.256ee085.js.map
-1
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-442e92d4.62be7804.js
-2
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-442e92d4.62be7804.js.map
-1
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-vendors.56893718.js
-550
View File
File diff suppressed because one or more lines are too long
docs/js/chunk-vendors.56893718.js.map
-1
View File
File diff suppressed because one or more lines are too long
package-lock.json
Generated
+5
View File
@@ -12095,6 +12095,11 @@
"defaults": "^1.0.3"
}
},
"webfontloader": {
"version": "1.6.28",
"resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
"integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
},
"webpack": {
"version": "4.44.1",
"resolved": "https://registry.npm.taobao.org/webpack/download/webpack-4.44.1.tgz?cache=0&sync_timestamp=1597916627918&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack%2Fdownload%2Fwebpack-4.44.1.tgz",
package.json
+2 -1
View File
@@ -17,7 +17,8 @@
"vue-custom-scrollbar": "^1.3.0",
"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",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
src/components/FontItem.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<md-list-item @click="selectFont(font.index)" :style="fontStyle">
{{ font.family }}
</md-list-item>
</template>
<style lang="css">
#font-dialog .md-list-item-content {
font-size: 22px !important;
}
</style>
<script>
import WebFontLoader from 'webfontloader';
export default {
name: 'FontItem',
props: {
font: {
type: Object,
required: true
}
},
computed: {
fontStyle() {
return {
'font-family': this.font.family
}
}
},
mounted() {
WebFontLoader.load({
google: {
families: [this.font.family]
}
})
}
}
</script>
src/components/FontSelector.vue
+3 -3
View File
@@ -24,9 +24,7 @@
<vue-custom-scrollbar :distance="20"
: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 }}
</md-list-item>
<FontItem v-for="font in shown" :key="font.index" :font="font"></FontItem>
<infinite-loading :identifier="search + sort" force-use-infinite-wrapper=".scroll-area"
@infinite="infiniteHandler">
<div slot="spinner"></div>
@@ -90,6 +88,7 @@
<script>
import axios from 'axios';
import FontItem from "@/components/FontItem";
import InfiniteLoading from 'vue-infinite-loading';
import vueCustomScrollbar from 'vue-custom-scrollbar'
import {gsap} from "gsap";
@@ -101,6 +100,7 @@ export default {
components: {
vueCustomScrollbar,
InfiniteLoading,
FontItem
},
data: () => ({
fonts: null,